小编Dan*_*nau的帖子

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

在此jsbin中，当您单击“显示更多”按钮时，应该能够看到呈现的“ 4”。控制台会将更改记录到my-element的模型中，但是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>

Run Code Online (Sandbox Code Playgroud)

polymer polymer-1.0

Dan*_*nau

lucky-day

4
推荐指数

1
解决办法

4313
查看次数