我正在尝试使用模板化器在 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 并手动更新测试属性。有一个更好的方法吗?我还可以将 my-element 上的观察者添加到测试属性,然后将 my-element 中的任何更改传播到模板。有更好的方法吗?我只是想了解这四种方法的作用以及何时/为何应使用它们。
这打败了我为什么我永远都得不到_forwardParentPath
nor _forwardParentProp
跑步。不过,我知道另外两个何时运行:)
_forwardInstanceProp
运行传递给模型的直接属性stamp
and _instanceProps
已初始化:
this._instanceProps = {
text: true
};
var clone = this.stamp({
text: this.text
});
_forwardInstancePath
另一方面,当您将嵌套对象传递给stamp
:
var clone = this.stamp({
nested: {
text: this.text
}
});
请参阅此垃圾箱的示例:http://jsbin.com/kipato/2/edit?html,js,控制台,输出
在标记的模板中,有两个输入绑定到两个变量,这两个变量触发instanceProp和instancePath。不幸的是,我无法修复后者发生时引发的错误。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)