我正在尝试使用模板生成器在Polymer中的主机元素和模板之间获得两种方式的数据绑定。例如,如果我尝试使两个输入框保持同步:
<html>
<body>
<my-element>
<template >
<input type="text" value="{{test::change}}" />
<div>The value of 'test' is: <span>{{test}}</span></div>
</template>
</my-element>
<dom-module id="my-element">
<template>
<input type="text" value="{{test::change}}" />
value:
<p>{{test}}</p>
<div id="items"></div>
<content id="template"></content>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
test: {
type: String,
value: "a"
},
behaviors: [ Polymer.Templatizer ],
_forwardParentProp: function(prop, value) {debugger},
_forwardParentPath: function(path, value) {debugger},
_forwardInstanceProp: function(inst, prop, value) {debugger},
_forwardInstancePath: function(inst, path, value) {debugger},
ready: function() {
this._instanceProps = {
test: true
};
var templates = Polymer.dom(this.$.template).getDistributedNodes();
template = templates[1];
this.templatize(template);
var itemNode = this.stamp({ test: this.test});
Polymer.dom(this.$.items).appendChild(itemNode.root);
}
});
</script>
</body>
</html>
在上面的代码中,我在_forwardInstanceProp中命中了调试器,但没有其他任何一个。为什么是这样?在_forwardInstanceProp内部,我可以访问my-element并手动更新test属性。有一个更好的方法吗?我还可以将my-element的观察者添加到test属性,然后将my-element的所有更改传播到模板。有更好的方法吗?我只是想了解所有这四种方法的用途以及何时/为什么使用它们。
最佳答案
我不知道为什么我永远都无法运行_forwardParentPath
和_forwardParentProp
。但是,我知道其他两个何时运行:)_forwardInstanceProp
运行传递给stamp
的模型的直接属性,并初始化_instanceProps
:
this._instanceProps = {
text: true
};
var clone = this.stamp({
text: this.text
});
另一方面,当您将嵌套对象传递给
_forwardInstancePath
时,stamp
运行:var clone = this.stamp({
nested: {
text: this.text
}
});
有关示例,请参见此bin:http://jsbin.com/kipato/2/edit?html,js,console,output
在标记的模板中,有两个绑定到触发instanceProp和instancePath的两个变量的输入。不幸的是,我无法修复后者发生时抛出的错误。
关于polymer - 使用Polymer.Templatizer进行双向数据绑定(bind),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35901997/