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小提琴的一些示例，演示了不同的绑定方式：

双向绑定：
```
https://jsfiddle.net/tej70osf/
```
单向绑定：在子元素的value属性上通知未设置：
```
https://jsfiddle.net/tej70osf/1/
```
单向绑定：对于子元素的value属性，notify为设置为true 为true，但是使用方括号[[value]]而不是{{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
            }
        }
});

查看完整示例的以下小提琴： https://jsfiddle.net/meenakshi_dhanani/6ffwh0qv/

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

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

2 个答案: