动态添加的项目不会触发观察者

Question

我正在使用Array变异方法向数组添加一些项目。这些项目显示在<dom-repeat>内，可以动态编辑。虽然编辑确实会更改对象中的数据，但任何附加的观察者都不会触发以指示发生了更改。

TL;博士

我正在使用数组变异方法来推送项目

this.push("data.contents", {
  id: 1,
  name: "Modifying this text doesn't trigger an observer"
});

我正在以dom-repeat

显示项目

这些项目使用<dom-repeat>显示，子属性name显示在<paper-input>中，可以动态修改。

  <template>
    <template is="dom-repeat" items="[[data.contents]]">
      <paper-input value="{{item.name::input}}"></paper-input>        
    </template>
  </template>

似乎在对象本身中修改数据时，任何附加的观察者都不会为这些子属性触发。

我正在附加通配符观察者

我正在观察使用通常的通配符观察者，如：

observers: [
  "logChange(data.*)"
],

注释

请注意：

• 通过直接this.set()更改项目，如下所示：

this.set("data.contents.0.name", "Foo")

会很好地触发观察者

以上的MCVE。

使用方法：

• 按按钮将某些项目推送到Array
• 编辑任何一个添加的项目

• 控制台应记录任何项目中发生的更改（它没有）

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">

<dom-module id="x-example">
  <template>
    <paper-button on-tap="pushItem">Push to Array</paper-button> 
    <template is="dom-repeat" items="[[data.contents]]">
      <paper-input value="{{item.name::input}}"></paper-input>        
    </template>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "x-example",
        properties: {
          data: {
            type: Object,
            value: {
              contents: []
            }
          }
        },

        observers: [
          "logChange(data.*)"
        ],

        pushItem: function() {
          this.push("data.contents", {
            id: 1,
            name: "Modifying this text doesn't trigger an observer"
          })
        },

        logChange: function() {
          console.log("change occured!");
        }

      });
    });
  </script>
</dom-module>

<x-example></x-example>

Answer 1

解决方法：https://github.com/Polymer/polymer/issues/4140#issuecomment-259465035

  

观察者不会因为你在items属性上有单向绑定注释而触发，这会阻止更改通知流向元素。将其更改为：items =＆＃34; {{data.contents}}＆＃34;而且你会看到变化。

实质上，转过来：

<template is="dom-repeat" items="[[data.contents]]">
  <paper-input value="{{item.name::input}}"></paper-input>        
</template>

到这个

<template is="dom-repeat" items="{{data.contents}}">
  <paper-input value="{{item.name::input}}"></paper-input>        
</template>