在此示例中(Plunk)属性和数组项之间存在绑定(bind)。
点击后，firstName 应从“John”更改为“Test”，但没有发生。
如何使属性在项目更新时更改？
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!--
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-input/paper-input.html" />
-->
<dom-module id="first-el">
<template>
<br> firstName should change on click:<br><br>
firstName: <span>{{employees.employees.0.firstName}}</span>
<br>
<br>
<button on-tap="tap_change_firstName_1">change firstName to: Test</button>
</template>
<script>
(function() {
'use strict';
Polymer({
is: "first-el",
properties: {
employees: {
type: Object,
notify: true,
},
},
//domReady:
attached: function() {
this.async(function() {
console.log('first: domReady:');
this.employees = {
"employees": [{
"firstName": "John",
"lastName": "Doe"
}]
};
});
},
tap_change_firstName_1: function() {
console.log('First: tap_change_firstName_1');
//update array item property
this.set('employees.employees.0.firstName', 'Test');
console.log('New value:');
console.log(this.employees.employees[0].firstName);
//here the value is cnahged but that does not reflect in the DOM
},
});
})();
</script>
</dom-module>
<!-- use the element -->
<first-el></first-el>
更新:
array-selector ( simple example ) 元素也可以用于此任务。
最佳答案
set() 便利函数只是将属性 setter 和 notifyPath 调用包装在一个中。当您的数据是这样的数组时，我相信 notifyPath 期望的是上层数组本身，而不仅仅是它的单个切片。
解决这个问题的一种方法(可能有几种)是在直接设置属性后让 notifyPath 调用自己。
this.employees.employees[0].firstName = 'Test';
this.notifyPath('employees.employees', this.employees.employees);
查看新的Plunker .
关于 polymer ，绑定(bind)到数组项不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34209556/