聚合物中的数据绑定

时间:2016-02-03 09:08:59

标签: polymer polymer-1.0

我的目标

我想对{% for product in productsDeleted %} <p>{{'basket.productMissingMessage'|trans({'%productRef%': product}, "app") }}</p> {% endfor %} 属性shown in this jsBin进行数据绑定 - 并使呈现的HTML文本输出与控制台中显示的值匹配。

我期待看到的......

When I open this jsBin,在标有 output 的右侧窗格中,我希望在第二行文字中看到以下内容:

items

我实际看到的......

相反,我明白了:

Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0

但是,如果您点击标有显示的按钮,并检查控制台,您将看到以下内容:

的console.log
Lorem,Ipsum,foo,0,bar,0,baz,0,qux,0

两者不匹配。

问题

  

如何更新/数据化这些变量以使输出窗格与控制台值匹配?

(如果可能的话,请出示有效的jsBin。)

代码

http://jsbin.com/laxaridawa/edit?html,console,output
Lorem,Ipsum,foo,1,bar,1,baz,0,qux,0

2 个答案:

答案 0 :(得分:1)

您无法将一个属性视为计算具有值。一次只有其中一个。

您不需要重新计算计算属性的重新计算。当computed函数的参数中列出的属性自动重新计算计算属性时。在您的情况下每次selected更改。

答案 1 :(得分:1)

据我所知,问题是由您编辑items数组引起的。

看起来,在运行计算函数_computeItems之后,Polymer会通过比较引用来评估值是否已更改。由于您已经重用了数组,因此引用没有更改,并且更改不会在框架中进一步传播(包括绑定和其他计算属性,请参阅  jsBin下面)。

我找到了两种方法让它发挥作用:

  1. 制作数组的副本并返回副本
  2. 手动调用notifyPath以通知值已更改
  3. 这是一个带有示例修复的jsBin。用它评论的版本替换_computeItems中的三行之一,它应该可以工作。我还添加了一个依赖于项目的计算属性,以表明没有修复,该属性也不会被正确重新计算。

    编辑:我想指出,这似乎意味着拥有 computevalue的属性是完全正确的。值只是一个初始值,可以立即重新计算,因为selected的值已设置。

    警告 如果itemsselected都有一个初始值并且items是基于selected计算的,那么事情会变得多毛 - 计算可能会在设置初始值之前运行,具体取决于申报单。

    1. jsBinitems成为第一个时,订单似乎是items-value,selected-value,items-compute和items-compute看到this.items具有初始值

    2. jsBin首先解析selected,然后首先运行selected-value,触发items-compute。现在,如果items-compute返回undefined,则取值为items,但如果items-compute返回值,则items-value似乎从不使用(通过取消注释_computeItems中的代码来检查)。