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

Question

聚合物文档有以下两种方式的绑定示例：

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

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

Answer 1

这里有一些关于 js fiddle 的示例，展示了不同的绑定方式：

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

希望对您有所帮助

Answer 2

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

在您的 javascript 代码中：

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

查看以下 fiddle 以获取完整示例： https://jsfiddle.net/meenakshi_dhanani/6ffwh0qv/

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

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

Complete example of Polymer Two Way Binding

web-component

polymer

polymer-1.0