聚合物中的数据绑定 [英] Databinding in Polymer
问题描述
我想对items属性进行数据绑定在此jsBin中显示- -并使呈现的HTML文本输出与控制台中显示的值匹配.
I want to databind the items property shown in this jsBin -- and have the rendered HTML text output match the value shown in the console.
当我打开此jsBin 时，在标记为的右窗格中输出，我希望在第二行文本中看到以下内容:
When I open this jsBin, in the right pane labeled output, I expect to see the following in the second line of text:
Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0
我实际上看到的是什么...
相反，我看到了:
What I actually see...
Instead, I see:
Lorem,Ipsum,foo,0,bar,0,baz,0,qux,0
但是，如果单击标有 Show 的按钮，并检查控制台，则会看到以下内容:
But if you click the button labeled Show, and check the console, you will see the following:
Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0
两个不匹配.
如何更新/绑定这些变量，以使输出窗格与控制台值匹配?
How do I update/databind these variables so the output pane matches the console value?
(如果可能，请显示一个可用的jsBin.)
(Please show a working jsBin if possible.)
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<button on-tap="_show">Show</button>
<div>{{selected}}</div>
<div>{{items}}</div>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
properties: {
items: {
type: Array,
notify: true,
reflectToAttribute: true,
computed: '_computeItems(selected)',
value: function() {
return [['Lorem', 'Ipsum'], ['foo', 0], ['bar', 0], ['baz', 0], ['qux', 0],];
}
},
selected: {
type: Array,
notify: true,
reflectToAttribute: true,
},
},
_computeItems: function(a) {
var out = this.items,
selectedLength = a.length,
i = out.length;
while(i---1){
var j = selectedLength;
while(j--) {
if(a.indexOf(out[i][0])===-1){
out[i][1] = 0;
}
else if(a.indexOf(out[i][0])>-1){
out[i][1] = 1;
}
else {
console.log('Error: Undefined index of selected item');
}
}
}
return out;
},
ready: function(){
this.set('items', this._computeItems(this.seletcted));
},
_show: function() {
console.log('Selected: ' + this.selected);
console.log('Items: ' + this.items);
},
});
})();
</script>
</dom-module>
<x-element
selected='["foo","bar"]'
></x-element>
</body>
推荐答案
据我所知，问题是由您就地编辑items数组引起的.
As far as I've found out, the problem is caused by you editing the items array in place.
似乎，在运行计算功能_computeItems之后，Polymer通过比较引用来评估该值是否已更改.由于您已经重用了数组，因此引用没有更改，更改也没有在框架中进一步传播(包括绑定和其他计算属性，请参见
jsBin).
It would seem, that after running the compute function _computeItems, Polymer evaluates whether the value has changed by comparing references. Since you've reused the array, the reference didn't change and changes aren't propagated further in the framework (both to bindings and other computed properties, see
jsBin below).
我发现了两种使之起作用的方法:
I've found two ways to make it work:
- 复制数组并返回副本
- 手动调用notifyPath来通知值已更改
这是一个 jsBin ，其中包含示例修复程序.用注释版本替换_computeItems中的三行之一，它应该可以工作.我还添加了一个取决于项目的计算属性，以显示没有修复，该属性也无法正确计算.
Here's a jsBin with example fixes. Replace one of the three lines inside _computeItems with it's commented version and it should work. I've also added a computed property that depends on items, to show that without the fix, that property isn't recalculated properly either.
我想指出，这似乎意味着拥有同时具有 和value的属性是完全正确的.值只是一个初始值，由于已设置selected的值，因此将立即重新计算.
I'd like to point out, that this seems to mean that it's perfectly correct to have a property that has both compute and value. Value is simply an initial value, which will immediatly be recalculated because selected's value is set.
警告
如果items和selected都具有初始值，并且根据selected计算items，则事情变得繁琐-根据声明顺序，计算可能会在设置初始值之前运行.
WARNING
If both items and selected have an initial value and items is computed based on selected, things get hairy - compute may be run before an initial value is set, depending on declaration order.
-
items时，顺序似乎成为项值，选定值，项计算和项计算时，this.items具有初始值.
jsBin When
itemsis first, the order seems to be items-value, selected-value, items-compute and items-compute seesthis.itemshaving the initial value.
selected时，然后选择首先运行-value会触发项计算.现在，如果items-compute返回未定义，则使用items-value，，但是，如果items-compute返回一个值，则似乎从不使用items-value(通过_computeItems中的取消注释代码检查).
jsBin When selected is declated first, then selected-value is ran first which triggers items-compute. Now, if items-compute returns undefined, items-value is taken, but if items-compute returns a value, items-value seems to be never used (check by uncommenting code in _computeItems).
这篇关于聚合物中的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
