Binding an object in mustache Polymer 2.0

Question

Property:-

    static get properties() {
        return {
            currencies: {
                type: Object,
                notify: true,
                reflectToAttribute: true,
                value: {
                    "name": "currencies"
                }
            }
        }
    }

Function:-

            _handleCryptoData(response) {
                var responseArray = response.detail.__data.response.data;
                var btc = responseArray[0];
                var eth = responseArray[2];
                var ltc = responseArray[3];
                this.currencies.btc = btc.amount;
                this.currencies.eth = eth.amount;
                this.currencies.ltc = ltc.amount;
}

If do console.log(this.currencies.btc) -- I get the value I want...some number.

Problem:-

<p>BTC:- <span>{{currencies.btc}}</span> </p>
<p>ETH:- <span>{{currencies.eth}}</span> </p>
<p>LTC:- <span>{{currencies.ltc}}</span> </p>

This is how this is bound in the view. Problem is since currencies is an object in view currencies.btc does not work. On the other hand If I bind just {{currencies}} I can see the object output. But {{currencies.btc}} does not work.

HOW TO MAKE THIS BINDING WORK. WHAT AM I DOING WRONG HERE?

Answer 1

These changes:

this.currencies.btc = btc.amount;
this.currencies.eth = eth.amount;
this.currencies.ltc = ltc.amount;

are not observable to Polymer.

There are a number of ways to solve it, but perhaps the easiest will be to call:

this.set('currencies.btc', btc.amount);
this.set('currencies.eth', eth.amount);
this.set('currencies.ltc', ltc.amount);