devpunks / snuggsi

snuggsi ツ - Easy Custom Elements in ~1kB
https://snuggsi.com
MIT License
395 stars 17 forks source link

Getter not updating template value after set #186

Closed 0xhjohnson closed 5 years ago

0xhjohnson commented 5 years ago

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.

0xhjohnson commented 5 years ago

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

snuggs commented 5 years ago

@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>