Question

鼓励我如何使用聚合物双向结合。

我有一个自制的Polymer元素，通过

定义一个布尔属性

    Polymer({
        is: "test-element",
        ready: function() {},

        properties: {
            propEnabled: {
                type: Boolean,
                notify: true,
                value: false,
                observer: "propEnabledChanged"
            }
        },

        // Called when aoEnabled is changed
        propEnabledChanged: function() { console.log("propEnabled value switched to " + this.propEnabled); },
    });

现在我在HTML页面中使用它

<body>
    <template id="t" is="dom-bind">           
        <test-element id="testElement"></test-element>

        <paper-toggle-button checked="{{Model.propEnabled}}">prop. enabled</paper-toggle-button>
        <button id="switchInternalState">switch state</button>          
    </template>
</body>

<script>
     var t = document.querySelector('#t');

    document.addEventListener('WebComponentsReady', function() {
        console.log('WebComponentsReady');

        // We have to bind the template with the model
        var t = document.querySelector('#t');
        t.Model = document.getElementById("testElement");

        // chaging the property directly does not reflect in the GUI... :-(
        var button = document.getElementById("switchInternalState");
        button.addEventListener("click", function() { 
            t.Model.set("propEnabled", !t.Model.propEnabled);
        });
    });

</script>

但是当点击开关状态按钮时...... 我将log propEnabled值切换为true

但页面上的toogle按钮不会改变... 如果我添加一个简单的

 <label>{{Model.propEnabled}}</label>

标签也不会改变...... 对我而言，它看起来有点像单向绑定，它应该是2路切换按钮触发日志并正确更改组件propEnabled值。所以它看起来像是一种绑定我的方式。

那么......我们怎么能真正受益于与Polymer模板的双向绑定????

Answer 1

您需要通过html将dom-bind中的propEnabled属性指定给test-element。

<test-element id="testElement" prop-enabled={{propEnabled}}></test-element>

<paper-toggle-button checked="{{propEnabled}}">prop. enabled</paper-toggle-button>

此外，您的脚本中不需要变量t.Model。你可以删除它。事件监听器应如下所示

    button.addEventListener("click", function() { 
        t.propEnabled = !t.propEnabled;
    });

以下plunker具有工作代码：http://embed.plnkr.co/13QJ7QFETIBg4bEiCMS7/preview

聚合物双向绑定

1 个答案: