devpunks / snuggsi

snuggsi ツ - Easy Custom Elements in ~1kB

Home Page:https://snuggsi.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getter not updating template value after set

0xhjohnson opened this issue · comments

Expected Behavior

I could be wrong but shouldn't the token binding update stay in sync with the getter.

Current Behavior

Token only sets the initial value then on promise resolve once value is updated token binding does not change.

Steps to Reproduce (for bugs)

https://jsfiddle.net/0xhjohnson/4fr2k1zq/7/

Context

Just trying to test making an async call and update the token binding with that value once resolved.

Works fine so long as I use <template> object context. Closing this.

@0xhjohnson speaking of "context"... Voila!

Luckily the code below should actually be a breeze for you to consume.
There is a .context object which pretty much removes the majority of your "hidden" code.
Also there is an onconnect event handler that fires when inserted into DOM.

You don't know what you don't know. And this means we need some updated documentation as well.

/cc @brandondees @tmornini

<hello-world>Coin of the day: {coin}</hello-world>

<script src=//unpkg.com/snuggsi></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Element Definition -----------------------------
Element ('hello-world')
// Class Description ------------------------------

(class extends HTMLElement {

  initialize () { this.context.coin = "Bit"  }

  onconnect (e) {  // event handler for when custom element is connected to DOM
  	axios
          .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    	  .then(response => {
            console.log(response.data.chartName);
            this.context.coin = response.data.chartName;
          })
  }

  get coin () { return this.context.coin }
})
</script>