Closed 0xhjohnson closed 5 years ago
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>
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.