Polymer-Data与DOM绑定

时间:2015-10-22 19:32:32

标签: polymer-1.0

我的聚合物成分定义如下:

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

现在,我实例化它并在点击另一个组件的按钮时添加到正文中。

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

在这样做时,我能够看到showPopup方法中的数据,但同样的情况并没有反映在DOM上。

好奇,可能是什么问题以及解决方法是什么。我是这方面的新手,并尝试编写一些基于组件的代码来理解聚合物。请就此提出建议。提前谢谢。

1 个答案:

答案 0 :(得分:1)

这是风格的问题。因为没有显示任何内容,我认为价值不会出现。但它实际上是隐藏的,我看不到它。我添加了一些样式 - 纸张 - 对话框 - 可滚动,现在我可以看到值。