CODEWITHSUNDEEP
polymer-1.0
Deepak
Deepak

Reputation: 51

Polymer-Data binding with DOM

I have a polymer component defined as below:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="add-money">
    <template>
    <style></style>
        <paper-dialog id="add-money-dialog" modal >
            <h2>Add money</h2>
            <paper-dialog-scrollable>
                <div>
                    <span>{{account.name}}</span>
                </div>
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button dialog-confirm autofocus>Add</paper-button>
            </div>
        </paper-dialog>
    </template>
    <script>    
        var AddMoney = Polymer({
            is: 'add-money',
            properties: {
                account: {
                    type: Object,
                    notify: true,
                }
            },
            factoryImpl: function(acc) {
                this.account=acc;

            },
            showPopup:function(){
                console.log(JSON.stringify(this.account));
                var dialog = document.getElementById("add-money-dialog");
                if (dialog) {
                    dialog.open();
                }
            }
        });
    </script>
</dom-module>

Now, I instantiates it and add to body on click of a button from another component.

        addMoney:function(e){
            var button = e.target;
            var dialog = new AddMoney(e.model.item);
            document.body.appendChild(dialog);
            dialog.showPopup();
        }

While doing that, I am able to see that data available in showPopup method, but the same does not reflect on the DOM.

Curious, what could be the problem and what is the fix for it. I am a newbee to this and trying to write some component based code to understand polymer. Please advice on this. Thanks in advance.

Upvotes: 0

Views: 162

Answers (1)

Deepak
Deepak

Reputation: 51

It was infact an issue with the styles. I thought the value is not coming up since there was nothing displayed. But it was actually hidden and I could not see it. I added some styles ot the paper-dialog-scrollable and now I can see the values.

Upvotes: 1

Related Questions