问题
In the below example, how do I bind the
obj.namevariable of the<input>field in<test-element2>to<test-element>?
背景:
下面是我的代码。我有两个 polymer 元素。
test-element将数据绑定(bind)到 obj.name . test-element2有一个由函数 objChanged 观察的输入字段.无论我在输入字段中更改什么值，它都会更改并打印到 test-element2但更改未反射(reflect)在 test-element 中.任何机构都可以帮助获得反射(reflect)到 test-element1 的值吗？ ?我有一个使用 this.fire("object-change") 的解决方案当文本更改但我正在寻找不使用事件监听器的解决方案时。还有一件事是我需要从脚本创建一个元素，并且它不能在 HTML DOM 中硬编码。
代码:
<!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>
最佳答案
如果您包括 <test-element>在 <template>的 test-element2您可以避免使用事件监听器或观察者。这样test-element2处理 input 之间的数据绑定(bind)和 <test-element>为你。
以下是维护 obj 的实时工作示例属性，因为您已在元素中设置它。
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<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
}
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}" />
<test-element obj="[[obj]]"></test-element>
</template>
<script>
Polymer({
is: "test-element2",
properties: {
"obj": {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
}
});
</script>
</dom-module>
<test-element2></test-element2>目前，命令式数据绑定(bind) 在
<template is="dom-bind"> 之外的 Polymer 1.0 中不受支持.我建议像下面的示例那样设置观察者，或者调整您的要求以包括
<test-element>在 test-element2 .button {
display: block;
}<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<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
}
}
});
</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: ["objNameChanged(obj.name)"],
objNameChanged: function(newValue) {
Polymer.dom(document).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
Polymer.dom(this.root).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
}
});
</script>
</dom-module>
<test-element2></test-element2>
<button>Add test-element to <em>test-element2</em>
</button>
<button>Add test-element to <em>body</em>
</button>
<script>
var testElement2 = document.querySelector("test-element2");
var createTestElement = function(insertPoint) {
var testElement = new TestElement();
testElement.notifyPath("obj.name", testElement2.obj.name);
insertPoint.appendChild(testElement);
};
document.querySelector("button:nth-of-type(2)").addEventListener("click", function() {
createTestElement(Polymer.dom(document).querySelector("body"));
});
document.querySelector("button").addEventListener("click", function() {
createTestElement(Polymer.dom(testElement2.root));
});
</script>关于data-binding - 使用 polymer 1.0 在两个 polymer 元素之间进行数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31571026/