Polymer 1.0：针对普通 Javascript 对象的数据绑定问题答案

【问题标题】：Polymer 1.0: trouble with data-binding against plain Javascript objectPolymer 1.0：针对普通 Javascript 对象的数据绑定问题
【发布时间】：2015-08-14 08:13:12
【问题描述】：

使用 polymer-starter-kit-1.0（为了更快地进行）我正在尝试针对普通 Javascript 对象（而不是其他 Polymer 自定义元素）建立数据绑定。

这似乎只能获取我绑定的属性的初始值。

为简单起见：我在主应用程序对象中添加了一个带有 Name 属性的“测试”对象，

  app.test = { 'Name': 'John Doe' }

然后在主页上添加一个元素，如下所示：

  <h3>App Name: <span>[[test.Name]]</span></h3>

这将正确显示初始值（'John Doe'）。

当我现在直接从 Javascript 代码更改该 Javascript 对象的名称（按钮的单击事件）时，如 app.test.Name = 'Jim Smith' 中的那样，单向绑定没有任何变化。

但是，如果我添加这样的输入元素：

  <input value="{{test.Name::input}}" />

然后，当输入元素中的文本发生更改时，span 元素将正确更新。

就好像直接从 Javascript 进行的更改不会被 Polymer 观察到。

我做错了什么？

【问题讨论】：

标签： data-binding polymer

【解决方案1】：

您可能没有正确使用绑定属性。访问聚合物主机对象似乎不是问题，因为您使用的是“app”变量......我相信它是模板/dom-bind 标记。

使用 host.set(path,value) 设置对象并让它们传播更改。

这个例子应该有助于： http://jsbin.com/daloho/2/edit?html,output

【讨论】：

【解决方案2】：

回答

您必须使用this.set('test.Name', newName);。

说明

您的问题的关键特征（和根本原因）是您绑定到一个对象路径（例如test.Name 而不仅仅是test）而不是简单属性（例如，test）在 Polymer() 构造函数中声明。

因此，根据documentation located here：

要更新路径绑定，必须通过以下方式之一更新路径值：

将 Polymer property binding 用于另一个元素。

使用set API，它为注册感兴趣的元素提供所需的通知。

【讨论】：

【解决方案3】：

我认为您最初的问题是方括号 [[ ]]，它导致 1 向数据绑定，我认为您想要 2 向数据绑定，所以使用波浪括号 {{ }}。几天来，我一直在研究 Polymer 文档，但仍在为从 0.5 到 1.0 的内容而苦苦挣扎。

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html

【讨论】：

感谢您的回答。我确实想要单向绑定。问题是，在初始数据检索之后，当直接通过 Javascript 更改数据时，它不再更新，但是当我从双向绑定输入控件更新 Javascript 对象时，数据刷新实际上起作用了！好像通知仅在从 Polymer 元素启动数据更改时发生。我使用 Object.observe 处理程序测试了 Javascript 更新通知，它正确报告了所有场景中所做的更改。
您也可以尝试使用 this.set('test.Name', 'John Doe')，也许会有所帮助？
在从 Javascript 代码设置 Name 属性后尝试了此操作，还尝试了 notifyChanges。 Object.observe 报告更改，但数据绑定不更新控件。看起来 Polymer 1.0 不支持将数据绑定到纯 Javascript 视图模型。那太可惜了，因为那时我无法使用它...
通过从路径根调用 notifyPath 找到一个“非解决方案”：function clickHandler(self, test) { services.Name = 'Another Name: ' + i++; self.dataHost.notifyPath('test.Name', test.Name);' } 这是一个非解决方案，因为它需要访问聚合物对象。
我找到了一种由“第三方”“编排”绑定的方法，它只是基于 Object.observe 设置通知，基本上将 Javascript 对象连接到从根聚合物向下的路径元素：Object.observe(app.test, function(changes) { changes.forEach(function(change) { app.notifyPath('test.' + change.name, change.object[change.name]); }); }); 这似乎是一种更好（更解耦）的方法，但仍远不及 knockout.js 给我的。