聚合物双向结合

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>

但是当点击切换状态按钮时... 我将日志 propEnabled 值切换为 true

但是页面上的toogle按钮并没有改变... 如果我添加一个简单的

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

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

那么...我们如何才能真正受益于 Polymer 模板的双向绑定？？？？

Answer 1

您需要通过 html.

将 dom-bind 中的 propEnabled 属性分配给测试元素

<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

聚合物双向结合

Polymer two way binding

data-binding

polymer

polymer-1.0