Polymer中如何为JSON对象动态子属性调用this.set或notifyPath？

我懂你遇到的问题了——在Polymer里更新对象的动态子属性后，怎么都触发不了变更通知是吧？先看看你原来的对比更新代码：

var newUser = evt.detail.response[0];
var keys = Object.keys(evt.detail.response[0]);
var cpt = [];
keys.forEach(key => {
  if (this.storedUser[key] != newUser[key]) {
    this.storedUser[key] = newUser[key];
    cpt.push(key);
  }
});

问题出在你调用set或notifyPath时的路径写法——Polymer需要的是字符串形式的完整属性路径，而不是你用的storedUser[key]这种语法（它会把[key]当成路径的一部分，而不是解析变量key的值），而'storedUser'[key]更是语法错误，肯定行不通。

正确的两种实现方式： #

1. 用this.set()自动触发通知（推荐）

this.set()会自动处理属性变更通知，只需要把父对象和动态key拼接成合法的路径字符串即可，用ES6模板字符串最方便：

var newUser = evt.detail.response[0];
var keys = Object.keys(newUser);
var cpt = [];
keys.forEach(key => {
  if (this.storedUser[key] !== newUser[key]) {
    // 用模板字符串拼接出完整路径：storedUser.属性名
    this.set(`storedUser.${key}`, newUser[key]);
    cpt.push(key);
  }
});

2. 先赋值再手动调用notifyPath

如果你还是想保留直接赋值的写法，那赋值后需要手动通知路径变更，同样要拼接正确的路径字符串：

var newUser = evt.detail.response[0];
var keys = Object.keys(newUser);
var cpt = [];
keys.forEach(key => {
  if (this.storedUser[key] !== newUser[key]) {
    this.storedUser[key] = newUser[key];
    // 通知该子属性的路径变更
    this.notifyPath(`storedUser.${key}`);
    cpt.push(key);
  }
});

额外提示： #

• 建议用!==严格相等运算符对比属性值，避免类型转换导致的误判（比如0 == false这种情况）；
• Polymer的数据绑定系统是通过字符串路径来追踪依赖的，所以动态生成路径时一定要确保是父对象.子属性的格式，不能用方括号语法。

内容的提问来源于stack exchange，提问作者NeitoFR