javascript - 如何使用 ractive 设计数组中新 DOM 条目的样式？

Question

我有一个修改数组的 Ractive 实例。当数组中出现新值时，我希望突出显示相应的元素。我目前通过在新创建的元素上设置一些样式来实现此目的。 这是一个jsfiddle 。

var ractive = new Ractive({
  el: 'main',
  template: `
    <h1>Hello {{name}}!</h1>

    {{ #things:index }}
      <p>{{ things[index] }}</p>  
    {{ /things }}

  `,
  data: function(){
    return {
      things: [
        'banana',
        'carrot'
      ]
    }
  },
  oncomplete: function(){
    var component = this;

    setTimeout(function(){
      component.set('things', ['apple', 'banana', 'carrot'])
    }, 5 * 1000)
  }
});

唯一的问题是，由于 ractive 重复使用元素，因此样式出现在错误的元素上。

当 'banana', 'carrot'] 更改为 ['apple', 'banana', 'carrot'] 时，您会看到 'carrot' 元素突出显示，而不是与新值对应的 'apple' 元素。

在数组中设置新条目样式的最佳方式是什么？

Answer 1

您应该使用splice方法

 component.splice('things', 0, 0, 'apple');   // Add at zero index   
 component.splice('things', 1, 0, 'apple');   // Add at first index  

而不是再次设置整个数组。这相当于 Array.splice 方法。

整个代码如下所示。

var ractive = new Ractive({
  el: 'main',
  template: `
    <h1>Hello {{name}}!</h1>

    {{ #things:index }}
        <p>{{ things[index] }}</p>  
    {{ /things }}

  `,
  data: function(){
    return {
        things: [
        'banana',
        'carrot'
      ]
    }
  },
  oncomplete: function(){
    var component = this;

    setTimeout(function(){    
        component.splice('things', 0, 0, 'apple');
    }, 5 * 1000)
  }
});

在这里阅读更多相关信息。
https://ractive.js.org/api/#ractivesplice