聚合物双向绑定

砰的一声如何使用聚合物双向绑定。聚合物双向绑定

我已经聚合物元件家庭定义通过

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值切换为真

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

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

标签也不改变... 对我来说，它看起来有点像一个双向绑定，它应该是2的方式切换按钮触发日志，并适当地改变组件propEnabled值。所以它看起来像一种绑定到我的方式。

所以...我们如何才能真正受益于双向绑定与聚合物模板？

来源

2015-10-18 JM Courivaud

您需要通过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

来源

2015-10-18 15:26:23 Srik

它的工作原理确定感谢...它也可以，如果这样做t.set（“Model.propEnabled”，T！ .Model.propEnabled）;在按钮事件处理程序中...非常感谢！ –

@JMCourivaud。如果解决您的问题，请考虑标记正确的答案。 –

聚合物双向绑定

回答

相关问题