Polymer 聚合物双向结合的完整示例

聚合物文档具有以下双向绑定示例：

    <script>
      Polymer({
        is: 'custom-element',
        properties: {
          someProp: {
            type: String,
            notify: true
          }
        }
      });
    </script>
    ...

    <!-- changes to "value" propagate downward to "someProp" on child -->
    <!-- changes to "someProp" propagate upward to "value" on host  -->
    <custom-element some-prop="{{value}}"></custom-element>

聚合物({
是：“自定义元素”，
特性：{
someProp：{
类型：字符串，
通知：正确
}
}
});
...

---

我正在寻找一个完整的示例，其中包括子级的设计、可导致`{value}}}属性向上和向下传播的编程和交互事件，以及完整设置/示例的演示。

以下是js fiddle上的一些示例，演示了不同的绑定方式：

• 双向绑定：
  https://jsfiddle.net/tej70osf/ https://jsfiddle.net/tej70osf/
• 单向绑定：通知未在子元素的value属性上设置：
  https://jsfiddle.net/tej70osf/1/ https://jsfiddle.net/tej70osf/1/
• 单向绑定：notify在子元素的value属性上设置为true，但是value属性使用方括号[[value]]而不是{{value}绑定：
  https://jsfiddle.net/tej70osf/2/ https://jsfiddle.net/tej70osf/2/

希望有帮助

<dom-module id="user-demo">
<template> 
<paper-input label="FIRST NAME" value="{{firstName}}"></paper-input>
</template>
</dom-module>
<user-demo></user-demo>

查看以下小提琴，了解完整示例：

---

我尝试使用更多的聚合物元素和双向结合。希望有帮助

谢谢-这些都很有意义-只是好奇ui是否为您呈现。当我单击“运行”时，无任何渲染…？是，它会渲染。可以从您的网络访问吗？firefox中我的adblocker导致它无法运行-切换到chrome，现在运行正常-再次感谢！我认为一些证书在这些小提琴中使用的资源上是无效的……艾哈迈德，我为你感到骄傲

 Polymer({
        is: 'user-demo',
        properties: {
            firstName: {
                type: String,
                value: 'John',
                notify: true
            }
        }
});