Question

我正在学习Cross-client Identity。我正在尝试将数组绑定到我的UI。数组中的每个对象都有一个将更改的属性。我需要在属性值更改时更新UI。我按如下方式定义了我的Polymer组件：

我-component.html

{{ items.length }}

组件呈现。但是，绑定根本不起作用。

h2行没有显示计数。它基本上只是一个空的items.length元素。
第一项在列表中呈现。但是，第二个没有。
单击“测试”按钮时，状态更新不会反映在屏幕上。

当我看到一切时，它对我来说是正确的。但是，从行为中可以清楚地看出，数据绑定设置不正确。我究竟做错了什么？ <section style="text-align:center;"> <h3>FRUITS</h3> <ol> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ol> </section>以及数组中所有项目的初始呈现让我真的很困惑。

Answer 1

聚合物数据绑定系统的工作原理如下：

如果声明的属性发生更改（例如添加新项），则会检测到更改并更新DOM。

然而，Polymer不会监控您的财产内部的变化（出于性能/兼容性原因）。

您需要通知Polymer您的财产内部的某些内容发生了变化。您可以使用设置方法或 notifyPath 执行此操作。

E.g（来自polymer data binding section）

this.set('myArray.1.name', 'Rupert');

Answer 2

如果要在更新阵列时执行某些操作，也可以添加观察者。

Polymer 1.0 properties Documentation

我认为你还应该在你的财产中添加一个notify：true

items: {
              type: Array,
              notify:true,
              value: function() {
                  return [
                    new Item({ name:'Tennis Balls', status:'Ordered' }),
                    new Item({ name:'T-Shirts', status: 'Ordered' })
                  ];
              }  
            }

数据绑定到聚合物中的数组

2 个答案: