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

Answer 2

使用<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <style> /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; padding: 0; } .panel { background: #eee; } .borderless td, .borderless th { border: none !important; } .table { margin: 0 auto; width: auto; } </style> <div class="container"> <div class="row"> <div class="panel col-md-12"> <table class="table borderless"> <tbody> <tr> <td> Jane - Software Engineer </td> <td> John - Senior Marketing Executive </td> </tr> <tr> <td> Teddy - CEO </td> <td> James - Lecturer </td> </tr> </tbody> </table> </div> </div> </div>缓存添加已添加项目的缓存。这是 working jsfiddle ：

recentlyAddedThings

如何使用ractive在数组中设置新DOM条目的样式？

2 个答案: