repeat - Google Polymer 重复值在 1...n 范围内

Question

我已经开始使用 Polymer 并完成了社交媒体卡片的基本教程。其中有几张卡片作为 repeat="{{post in posts}}" 循环。我想做的是 repeat="{{post in range 1...10}}"。最终我想使用已发布的属性 cols 来提供最大值而不是 10。我已经能够通过将 cols 属性设置为 [1,2,...,9] 之类的东西来实现这样的工作但这对任何大的值(value)观都是不合理的。我还通过使用 ready 函数并执行 this.colsAr = new Array(cols) 对此进行了扩展，然后在重复`{{col in colsAr}} .

在数量由属性确定的可变数量元素上循环的最佳/正确方法是什么？

此外，还可以说 cols 属性是通过选择输入动态更改的。这应该会在选择新值时导致重新绘制。

Answer 1

通常最好的方法是使用计算属性来表达过滤后的数组。

像这样:

 <template repeat="{{post in slice}}">
   ...
  computed: {
    slice: 'sliced(posts)'
  },
  sliced: function(posts) {
    return posts.slice(1, 3);
  }

但是，现在，计算属性引擎不会自动 ArrayObserve posts，因此我们必须在 Array 结构发生变化时手动强制重新计算。

  kick: 0,
  computed: {
    slice: 'sliced(posts, kick)'
  },
  sliced: function(posts) {
    return posts.slice(1, 3);
  },
  postsChanged: function() {
    this.kick++;
  }

增加 kick 会强制数据引擎重新计算 slice(给它一个 kick)。 Fwiw，我们正在努力改善这种特殊情况，但上述技术应该在短期内有效。

工作示例:

http://jsbin.com/dadeto/3/edit