Polymer 如何更新聚合物模型中的隐藏$=属性？_Polymer_Polymer 1.0

Polymer 如何更新聚合物模型中的隐藏$=属性？

polymer

Polymer 如何更新聚合物模型中的隐藏$=属性？,polymer,polymer-1.0,Polymer,Polymer 1.0,在中，当您单击“显示更多”按钮时，您应该能够看到渲染的“4”。控制台记录对my元素模型的更改，但DOM不更新。我做错了什么 <!DOCTYPE html> <html> <head> <title>polymer</title> <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"><

在中，当您单击“显示更多”按钮时，您应该能够看到渲染的“4”。控制台记录对my元素模型的更改，但DOM不更新。我做错了什么

<!DOCTYPE html>
<html>
<head>
  <title>polymer</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>

<dom-module id="my-element">
  <template>
    <button on-click="_dosomething">show more</button>
    <template is="dom-repeat" items="{{myItems}}" >
      <div hidden$="{{_isItemHidden(item, shownItems)}}">{{item}}</div>
    </template>
  </template>
</dom-module>

<script>
  HTMLImports.whenReady(function() {
    Polymer({
     is: 'my-element',
     ready: function() {
      this.myItems = [1,2,3,4,5];
      this.shownItems = [1,2,3]
     }, 
      _dosomething: function(){
        console.log(this.shownItems);
        this.push('shownItems', 4);
        console.log(this.shownItems);
      },
      _isItemHidden: function(item, shownItems) {
        return !shownItems.some(function (i) {return i == item});
      }
    });
  });
</script>

<my-element></my-element>


</body>
</html>


聚合物
显示更多
{{item}}
HTMLImports.whenReady（函数（）{
聚合物({
是‘我的元素’，
就绪：函数（）{
this.myItems=[1,2,3,4,5]；
this.shownItems=[1,2,3]
}, 
_dosomething:function（）{
console.log（this.shownItems）；
这个。推（'shownItems'，4）；
console.log（this.shownItems）；
},
_isItemHidden:函数（项，shownItems）{
return！shownItems.some（函数（i）{return i==item}）；
}
});
});

解决方案是，要通知系统并调用

\isItemHidden

函数，必须更新

shownItems

数组的引用

this.shownItems.push(4);

this.set('shownItems', this.shownItems.slice());

不必每次都创建一个新数组，您可以通过在计算绑定（从中读取）中使用通配符*来观察数组的更改

所以你的绑定就变成了-

<div hidden$="{{_isItemHidden(item, shownItems.*)}}">{{item}}</div>

查看更新的jsbin。

谢谢！我有点困惑为什么API是这样的-我认为这个.push/pop/set/etc的要点是使用聚合物提供的阵列突变剂可以观察到阵列的突变。但是听起来你必须在一个全新的数组上使用this.set（在这种情况下，由slice（）提供）。为什么只有“this.showItems.slice（）”有效而“this.showItems”无效？？？甚至两者都输出相同的值。

_isItemHidden: function(item, e) {
    return !e.base.some(function (i) { return i == item });
}