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

Question

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

tl;dr

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

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

The observer isn't firing because you have one-way binding annotations on the items property, which prevents change notifications from flowing up to the element. Change it to: items="{{data.contents}}" and you'll see the changes.

本质上，转这个：

<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>

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

Dynamically added items do not trigger observers

polymer

polymer-1.0

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

我正在 dom-repeat

我正在附加通配符观察者

备注

上述内容的 MCVE。