Fatal编程技术网
  • data-binding/
  • Data binding 使用聚合物1.0在两个聚合物元素之间进行数据绑定 问题:

Data binding 使用聚合物1.0在两个聚合物元素之间进行数据绑定 问题:

data-binding polymer

Data binding 使用聚合物1.0在两个聚合物元素之间进行数据绑定 问题:,data-binding,polymer,web-component,polymer-1.0,2-way-object-databinding,Data Binding,Polymer,Web Component,Polymer 1.0,2 Way Object Databinding,在下面的示例中，如何将中字段的obj.name变量绑定到？ 背景： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js">

在下面的示例中，如何将
中
字段的
obj.name
变量绑定到
？

背景：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../bower_components/polymer/polymer.html"/>
</head>

<body>
    <dom-module id="test-element">
        <template>
            <div>Hello <span>{{obj.name}}</span></div>
        </template>

        <script>
            TestElement = Polymer({
                is: "test-element",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],
                "objChanged": function() {
                    var that = this;
                    console.log("First element in 1",that.obj);
                }
            });
        </script>
    </dom-module>


    <dom-module id="test-element2">
        <template>
            <input value="{{obj.name::input}}"/>
        </template>

        <script>
            Polymer({
                is: "test-element2",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true,
                        value: {
                            "name": "Charlie"
                        }
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],

                ready: function() {
                    var element = new TestElement();
                    element.set("obj", this.obj);
                    this.appendChild(element);
                },

                "objChanged": function() {
                    console.log("changed in test-element2:", this.obj);
                }
            });
        </script>
    </dom-module>


    <test-element2></test-element2>
 </body>
</html>

<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').

<dom-module id="ls-sample">
  <iron-localstorage name="my-app-storage"
    value="{{cartoon}}"
    on-iron-localstorage-load-empty="initializeDefaultCartoon"
  ></iron-localstorage>
</dom-module>

<script>
  Polymer({
    is: 'ls-sample',
    properties: {
      cartoon: {
        type: Object
      }
    },
    // initializes default if nothing has been stored
    initializeDefaultCartoon: function() {
      this.cartoon = {
        name: "Mickey",
        hasEars: true
      }
    },
    // use path set api to propagate changes to localstorage
    makeModifications: function() {
      this.set('cartoon.name', "Minions");
      this.set('cartoon.hasEars', false);
    }
  });
</script>
下面是我的代码。我有两种高分子元素<代码>测试元素将数据绑定到对象名
test-element 2
有一个输入字段，该字段由函数
objChanged
观察。无论我在输入字段中更改了什么值，它都会更改并在
test-element2
中打印，但更改不会反映在
test-element
中。任何主体能否帮助将值反映到
test-element1
？我有一个使用this.fire（“objectchange”）的解决方案，用于文本更改时，但我正在寻找一个不使用事件侦听器的解决方案

还有一件事是，我需要从脚本创建一个元素，它不能在HTMLDOM中硬编码

代码：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../bower_components/polymer/polymer.html"/>
</head>

<body>
    <dom-module id="test-element">
        <template>
            <div>Hello <span>{{obj.name}}</span></div>
        </template>

        <script>
            TestElement = Polymer({
                is: "test-element",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],
                "objChanged": function() {
                    var that = this;
                    console.log("First element in 1",that.obj);
                }
            });
        </script>
    </dom-module>


    <dom-module id="test-element2">
        <template>
            <input value="{{obj.name::input}}"/>
        </template>

        <script>
            Polymer({
                is: "test-element2",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true,
                        value: {
                            "name": "Charlie"
                        }
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],

                ready: function() {
                    var element = new TestElement();
                    element.set("obj", this.obj);
                    this.appendChild(element);
                },

                "objChanged": function() {
                    console.log("changed in test-element2:", this.obj);
                }
            });
        </script>
    </dom-module>


    <test-element2></test-element2>
 </body>
</html>

<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').

<dom-module id="ls-sample">
  <iron-localstorage name="my-app-storage"
    value="{{cartoon}}"
    on-iron-localstorage-load-empty="initializeDefaultCartoon"
  ></iron-localstorage>
</dom-module>

<script>
  Polymer({
    is: 'ls-sample',
    properties: {
      cartoon: {
        type: Object
      }
    },
    // initializes default if nothing has been stored
    initializeDefaultCartoon: function() {
      this.cartoon = {
        name: "Mickey",
        hasEars: true
      }
    },
    // use path set api to propagate changes to localstorage
    makeModifications: function() {
      this.set('cartoon.name', "Minions");
      this.set('cartoon.hasEars', false);
    }
  });
</script>


演示
你好{{obj.name}
测试元素=聚合物({
是：“测试元素”，
特性：{
“obj”：{
类型：对象，
通知：正确
}
},
观察员：[
“对象已更改（对象名称）”
],
“objChanged”：函数（）{
var=这个；
log（“1中的第一个元素”，即.obj）；
}
});
聚合物({
是：“测试元素2”，
特性：{
“obj”：{
类型：对象，
通知：正确，
价值：{
“姓名”：“查理”
}
}
},
观察员：[
“对象已更改（对象名称）”
],
就绪：函数（）{
var元素=新的TestElement（）；
元素集（“obj”，this.obj）；
这个.appendChild（元素）；
},
“objChanged”：函数（）{
log（“在test-element2中更改：”，this.obj）；
}
});


你好{{name}
聚合物({
是：“测试元素”，
特性：{
名称：String
}
});
聚合物({
是：“测试元素2”，
特性：{
名称：String
}
});
如果在
测试元素2
的
中包含
，则可以避免使用事件侦听器或观察者。通过这种方式，
test-element2
为您处理
输入
和
之间的数据绑定

下面是一个实时工作示例，该示例在元素中设置了
obj
属性后，对其进行维护


你好[[obj.name]]
测试元素=聚合物({
是：“测试元素”，
特性：{
“obj”：{
类型：对象，
通知：正确
}
}
});
聚合物({
是：“测试元素2”，
特性：{
“obj”：{
类型：对象，
通知：正确，
价值：{
“姓名”：“查理”
}
}
}
});
如果您选择将元素分解为自己的文件，则可以通过让一个组件观察另一个组件的属性来演示双向数据绑定

代码 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="parent-element.html">
  <link rel="import" href="first-child.html">
  <link rel="import" href="second-child.html"> </head>

<body>
  <parent-element></parent-element>
</body>

</html>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1={{prop}}></second-child> In parent-element
    <h1>{{value}}</h1> </template>
  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String
        }
      },
      valueChanged: function() {
        console.log("value changed");
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
  <template>
    <p>first element.</p>
    <h2>{{prop}}</h2> </template>
  <script>
    Polymer({
      is: "first-child",
      properties: {
        prop: {
          type: String,
          notify: true
        }
      },
      ready: function() {
        this.prop = "property";
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
  <template>
    <p>Second element.</p>
    <h2>{{feat1}}</h2> </template>
  <script>
    Polymer({
      is: "second-child",
      properties: {
        feat1: {
          type: String,
          notify: true,
          value: "initial value"
        }
      },
      ready: function() {
        this.addEventListener("feat1-changed", this.myAct);
      },
      myAct: function() {
        console.log("feat1-changed ", this.feat1);
      }
    });
  </script>
</dom-module>
父元素.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="parent-element.html">
  <link rel="import" href="first-child.html">
  <link rel="import" href="second-child.html"> </head>

<body>
  <parent-element></parent-element>
</body>

</html>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1={{prop}}></second-child> In parent-element
    <h1>{{value}}</h1> </template>
  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String
        }
      },
      valueChanged: function() {
        console.log("value changed");
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
  <template>
    <p>first element.</p>
    <h2>{{prop}}</h2> </template>
  <script>
    Polymer({
      is: "first-child",
      properties: {
        prop: {
          type: String,
          notify: true
        }
      },
      ready: function() {
        this.prop = "property";
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
  <template>
    <p>Second element.</p>
    <h2>{{feat1}}</h2> </template>
  <script>
    Polymer({
      is: "second-child",
      properties: {
        feat1: {
          type: String,
          notify: true,
          value: "initial value"
        }
      },
      ready: function() {
        this.addEventListener("feat1-changed", this.myAct);
      },
      myAct: function() {
        console.log("feat1-changed ", this.feat1);
      }
    });
  </script>
</dom-module>


在父元素中
{{value}}
聚合物({
是：“父元素”，
特性：{
价值：{
类型：字符串
}
},
valueChanged:函数（）{
控制台日志（“值更改”）；
}
});
first child.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="parent-element.html">
  <link rel="import" href="first-child.html">
  <link rel="import" href="second-child.html"> </head>

<body>
  <parent-element></parent-element>
</body>

</html>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1={{prop}}></second-child> In parent-element
    <h1>{{value}}</h1> </template>
  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String
        }
      },
      valueChanged: function() {
        console.log("value changed");
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
  <template>
    <p>first element.</p>
    <h2>{{prop}}</h2> </template>
  <script>
    Polymer({
      is: "first-child",
      properties: {
        prop: {
          type: String,
          notify: true
        }
      },
      ready: function() {
        this.prop = "property";
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
  <template>
    <p>Second element.</p>
    <h2>{{feat1}}</h2> </template>
  <script>
    Polymer({
      is: "second-child",
      properties: {
        feat1: {
          type: String,
          notify: true,
          value: "initial value"
        }
      },
      ready: function() {
        this.addEventListener("feat1-changed", this.myAct);
      },
      myAct: function() {
        console.log("feat1-changed ", this.feat1);
      }
    });
  </script>
</dom-module>


第一个要素

{{prop}}
聚合物({
是：“第一个孩子”，
特性：{
道具：{
类型：字符串，
通知：正确
}
},
就绪：函数（）{
this.prop=“property”；
}
});
second child.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="parent-element.html">
  <link rel="import" href="first-child.html">
  <link rel="import" href="second-child.html"> </head>

<body>
  <parent-element></parent-element>
</body>

</html>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1={{prop}}></second-child> In parent-element
    <h1>{{value}}</h1> </template>
  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String
        }
      },
      valueChanged: function() {
        console.log("value changed");
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
  <template>
    <p>first element.</p>
    <h2>{{prop}}</h2> </template>
  <script>
    Polymer({
      is: "first-child",
      properties: {
        prop: {
          type: String,
          notify: true
        }
      },
      ready: function() {
        this.prop = "property";
      }
    });
  </script>
</dom-module>

<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
  <template>
    <p>Second element.</p>
    <h2>{{feat1}}</h2> </template>
  <script>
    Polymer({
      is: "second-child",
      properties: {
        feat1: {
          type: String,
          notify: true,
          value: "initial value"
        }
      },
      ready: function() {
        this.addEventListener("feat1-changed", this.myAct);
      },
      myAct: function() {
        console.log("feat1-changed ", this.feat1);
      }
    });
  </script>
</dom-module>


第二个要素

{{feat1}}
聚合物({
是：“第二个孩子”，
特性：{
专长1：{
类型：字符串，
通知：正确，
值：“初始值”
}
},
就绪：函数（）{
this.addEventListener（“feat1已更改”，this.myAct）；
},
myAct:function（）{
log（“feat1已更改”，this.feat1）；
}
});
如果您选择将元素分解为自己的文件，则可以使用
进行双向数据绑定：

示例代码：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../bower_components/polymer/polymer.html"/>
</head>

<body>
    <dom-module id="test-element">
        <template>
            <div>Hello <span>{{obj.name}}</span></div>
        </template>

        <script>
            TestElement = Polymer({
                is: "test-element",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],
                "objChanged": function() {
                    var that = this;
                    console.log("First element in 1",that.obj);
                }
            });
        </script>
    </dom-module>


    <dom-module id="test-element2">
        <template>
            <input value="{{obj.name::input}}"/>
        </template>

        <script>
            Polymer({
                is: "test-element2",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true,
                        value: {
                            "name": "Charlie"
                        }
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],

                ready: function() {
                    var element = new TestElement();
                    element.set("obj", this.obj);
                    this.appendChild(element);
                },

                "objChanged": function() {
                    console.log("changed in test-element2:", this.obj);
                }
            });
        </script>
    </dom-module>


    <test-element2></test-element2>
 </body>
</html>

<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').

<dom-module id="ls-sample">
  <iron-localstorage name="my-app-storage"
    value="{{cartoon}}"
    on-iron-localstorage-load-empty="initializeDefaultCartoon"
  ></iron-localstorage>
</dom-module>

<script>
  Polymer({
    is: 'ls-sample',
    properties: {
      cartoon: {
        type: Object
      }
    },
    // initializes default if nothing has been stored
    initializeDefaultCartoon: function() {
      this.cartoon = {
        name: "Mickey",
        hasEars: true
      }
    },
    // use path set api to propagate changes to localstorage
    makeModifications: function() {
      this.set('cartoon.name', "Minions");
      this.set('cartoon.hasEars', false);
    }
  });
</script>
或


...
...
这个.$.meta.byKey（'info'）.getAttribute（'value'）；
....
如果您选择将元素分解为自己的文件，则可以使用
进行双向数据绑定

示例代码：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../bower_components/polymer/polymer.html"/>
</head>

<body>
    <dom-module id="test-element">
        <template>
            <div>Hello <span>{{obj.name}}</span></div>
        </template>

        <script>
            TestElement = Polymer({
                is: "test-element",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],
                "objChanged": function() {
                    var that = this;
                    console.log("First element in 1",that.obj);
                }
            });
        </script>
    </dom-module>


    <dom-module id="test-element2">
        <template>
            <input value="{{obj.name::input}}"/>
        </template>

        <script>
            Polymer({
                is: "test-element2",

                properties: {
                    "obj": {
                        type: Object,
                        notify: true,
                        value: {
                            "name": "Charlie"
                        }
                    }
                },

                observers: [
                    "objChanged(obj.name)"
                ],

                ready: function() {
                    var element = new TestElement();
                    element.set("obj", this.obj);
                    this.appendChild(element);
                },

                "objChanged": function() {
                    console.log("changed in test-element2:", this.obj);
                }
            });
        </script>
    </dom-module>


    <test-element2></test-element2>
 </body>
</html>

<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').

<dom-module id="ls-sample">
  <iron-localstorage name="my-app-storage"
    value="{{cartoon}}"
    on-iron-localstorage-load-empty="initializeDefaultCartoon"
  ></iron-localstorage>
</dom-module>

<script>
  Polymer({
    is: 'ls-sample',
    properties: {
      cartoon: {
        type: Object
      }
    },
    // initializes default if nothing has been stored
    initializeDefaultCartoon: function() {
      this.cartoon = {
        name: "Mickey",
        hasEars: true
      }
    },
    // use path set api to propagate changes to localstorage
    makeModifications: function() {
      this.set('cartoon.name', "Minions");
      this.set('cartoon.hasEars', false);
    }
  });
</script>


聚合物({
是：“ls样本”，
特性：{
卡通：{
类型：对象
}
},
//如果未存储任何内容，则初始化默认值
initializeDefaultCartoon:函数（）{
这个.卡通={
名字：“米奇”，
哈塞尔斯：是的
}
},
//使用路径集api将更改传播到本地存储
makeModifications:function（）{
这个.set（'cartoon.name'，'Minions'）；
此.set（'cartoon.hasear'，false）；
}
});
Hi Coderfin我需要在用户交互时创建一个元素，比如var element=new T