以编程方式在聚合物中设置数组项的属性值
Programmatically setting property value on array item in Polymer
我有一个使用聚合物的应用程序。在这个应用程序中,我有一个像这样的组件:
my-component.html
<dom-module id="view-tests">
<template>
<table>
<tbody>
<template is="dom-repeat" items="{{ items }}" as="item">
<tr>
<td>[[ item.name ]]</td>
<td><item-status status="[[ item.status ]]"></item-status></td>
</tr>
</template>
</tbody>
</table>
<button on-click="bindClick">Bind</button>
</template>
<script>
Polymer({
is: "my-component",
properties: {
items: {
type: Array,
notify: true,
value: function() {
return [
new Item({ name:'Item 1', status:'In Stock' }),
new Item({ name:'Item 2', status:'Sold Out' })
];
}
},
},
bindClick: function() {
var items = items;
for (var i=0; i<items.length; i++) {
if (i === 1) {
items[i].status = 'In Stock';
}
}
}
});
</script>
</dom-module>
如上面的代码片段所示,还有另一个组件item-status
。
item-status.html
<dom-module id="test-status">
<template>
<span class$="{{ statusClass }}">{{ status }}</span>
</template>
<script>
Polymer({
is: "item-status",
properties: {
status: {
type: String,
value: '',
observer: '_statusChanged'
}
},
_statusChanged: function(newValue, oldValue) {
if (newValue === 'In Stock') {
this.statusClass = 'green';
} else if (newValue === 'Sold Out') {
this.statusClass = 'red';
} else {
this.statusClass = 'black';
}
}
});
</script>
</dom-module>
初始数据绑定工作正常。然而,当我点击"绑定"按钮时,文本并没有像我期望的那样更新。另外,文字的颜色也没有像我想象的那样变化。我故意有var items = items;
,因为在我的实际代码中,有一个回调发生,我必须将项目传递到回调。我不确定是否有更好的方法。然而,我的观点并没有正确地更新。
感谢您提供的任何帮助
- 当我点击"绑定"按钮时,文本不会像我期望的那样更新
要使其工作,您必须使用this.set('item.1 ')。status', 'In Stock')。有关数组绑定的详细信息,请参阅https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#array-binding。
- 另外,文字的颜色并没有像我期望的那样改变。
你只是在设置类。你必须为项目设计样式。在item-status中包含样式标签,如下所示
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
3。var items = items;故意的,因为在我的实际代码中,有一个回调发生了
我不认为你可以在回调中为数组项设置值,并使聚合物观察者工作。如果你在你的场景上发布更多的细节,有人可能会帮助你。
- 这是一个很好的做法,让你的dom模块id和你的聚合物'is' id相同。这是我第一次遇到不同的id,我几乎肯定它会破坏一些东西。
工作jsbin: http://jsbin.com/yugofo/edit?html,console,output
相关文章:
- 如何筛选对象的数组属性
- 如何在mongodb(mongose)中覆盖子文档的数组属性
- 如何按对象数组中的数组属性进行筛选
- 基于其他属性查询多维数组属性
- 循环访问 JS 数组 + 数组属性
- AngularJS:观察数组属性
- JSON对象中的数组属性通过foreach更新-更新所有键
- Javascript - 使用数组属性定义对象
- Ember.js with EmberFire Object - 如何使用数组属性
- 我无法访问由开发人员工具中可见的回调填充的 javascript 对象数组属性内容
- 设置对象数据结构数组属性
- 按子数组属性/值对 JavaScript 对象数组进行排序
- 对象的数组属性
- 如何访问 JavaScript 对象上的数组属性
- 使用 jQuery 深层复制对象数组属性值
- 访问并迭代模板内Kendo UI Listview的数组属性
- 主干模型数组属性更改和更改事件侦听器不总是启动
- 在json数组属性中循环
- 通过js中的数组属性方法进行迭代
- 无法清除主干模型数组属性