聚合物-更新元素 [英] Polymer - Updating Element
问题描述
我正在学习Polymer.挑战我的一项是更新数组的项.我希望有适用于Polymer的CDN，所以我可以摆弄一个小提琴.虽然现在，我有一个这样定义的元素:
I'm learning Polymer. One item that is challenging me is updating the item of an array. I wish there was a CDN for Polymer so I could put together a fiddle. For now though, I have an element defined like this:
my-element.html
<dom-module id="my-element">
<button on-click="onLoadData">Load Data</button>
<button on-click="onTest1Click">Test 1</button>
<button on-click="onTest2Click">Test 2</button>
<template is="dom-repeat" items="[[ data ]]" as="element">
<div><span>[[ element.id ]]</span> - <span>[[ element.status ]]</span></div>
<template is="dom-repeat" items="[[ element.children ]]" as="child">
<div> <span>[[ child.id ]]</span> - <span>[[ child.status ]]</span></div>
</template>
</template>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
data: {
type: Array,
value: function() {
return [];
}
}
},
onLoadData: function() {
// Generate some dummy data for the sake of illustration.
for (var i=1; i<=3; i++) {
var element = {
id: i,
state: 'Initialized',
description: ''
};
element.children = [];
for (var j=1; j<=5; j++) {
var child = {
id: i + '-' + j,
state: 'Initialized',
description: ''
}
element.children.push(child);
}
data.push(element);
}
},
// Setting an individual property value works
onTest1Click: function() {
this.set('data.0.children.0.state', 'data set');
},
// Setting an entire object value does NOT work.
onTest2Click: function() {
var c = this.data[0].children[0];
c.state = 'data set';
this.set('data.0.children.0', c);
}
});
</script>
</dom-module>
由于某种原因，如果我更新数组元素的属性值(如onTest1Click中所示)，则UI会正确更新.但是，如果我更新了整个元素(如onTest2Click中所示)，则不会更新UI.在我真正的问题中，我正在更新元素上的多个属性.因此，我试图更新一个数组元素，而不仅仅是一个属性.我是在做错什么还是误解了什么?或者，我是否必须分别更新每个属性值?
For some reason, if I update the property value of an array element (as shown in onTest1Click), the UI is updated properly. However, if I update an entire element (as shown in onTest2Click), the UI does NOT get updated. In my real problem, I'm updating multiple properties on an element. For that reason, I'm trying to update an array element and not just a property. Am I doing something wrong or misunderstanding something? Or, am I going to have to update each property value individually?
推荐答案
如果您要更改数组而不是仅更改数组中的对象(例如换出数组中的整个元素)，则存在数组更改与this.set类似的方法.
If you want to mutate an array, rather than just an object in an array (such as swapping out an entire element in an array), there are array mutation methods similar to this.set.
例如，this.splice('data.0.children', 0, 1, c)将在子数组的0索引处删除当前项，并用新的项替换它，这就是您要尝试执行的操作.还有this.shift，this.unshift，this.push和this.pop.这些都与Array原型相似.
For example, this.splice('data.0.children', 0, 1, c) will remove the current item at the 0 index of the child array and replace it with a new one, which is what it appears you're trying to do. There's also this.shift, this.unshift, this.push and this.pop. These are all similar to their Array prototype counterparts.
要注意的一件事是，在您的示例中，您实际上并没有换出整个对象.当您从数组中获取元素，更改字段并尝试将其替换为自身时，实际上并没有替换它，因此实际上并不会触发更新.而且由于该字段的更改是在Polymer的通知系统之外完成的，因此也不会触发更新.如果将项目替换为实际的其他对象，则可以使用拼接来工作.
One thing to note is that in your example, you're also not actually swapping out the entire object. When you grab the element from the array, mutate a field, and try and replace it with itself, you're not actually replacing it, so that doesn't actually trigger an update. And since the mutation of the field was done outside of Polymer's notification system, that also doesn't trigger an update. If you replace the item with an actual different object, it will work using splice. https://jsbin.com/rapomiyaga/1/edit?html,output (This is a modified snapshot of Günter Zöchbauer's jsbin)
如果您不是要复制对象/一个全新的对象，则需要通过this.set分别更新每个字段.
If you're not making a copy of the object/a completely new object, you'll want to update each field individually through this.set.
这篇关于聚合物-更新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
