Удалить первый элемент на клик в Ractive.js

Question

У меня есть список из 4 элементов, и мне нужно удалить первый элемент при каждом нажатии кнопки. Я реализовал простое решение, основанное на методе сращивания, но, похоже, работает только с первого щелчка. Любой последующий щелчок ничего не меняет.

Вот HTML:

<script type="text/ractive" id="template1"> 
    {{#each Posts}} 
    <div style="background-color: red">{{Text}}</div> 
    {{/each}} 
    <button on-click="removeFirst">Remove first</button> 
</script> 

<main></main> 

, JavaScript:

var ractive1 = new Ractive({ 
    template: '#template1', 
    el: 'main', 
    data: { 
     Posts: [ {Text: "Post 1"}, {Text: "Post 2"}, {Text: "Post 3"}, {Text: "Post 4"} ],  
    } 
}); 

ractive1.on({ 
     removeFirst: function() { 
      ractive1.splice('Posts', 0, 1, []); 
     } 
}); 

и jsfiddle demo.

Answer 1

При вызове splice на массив, то первый аргумент является индекс, с которого начинается удаление элементов, то второй аргумент число элементов для удаления, и все остальные являются элементы для вставки в массив в том же месте. То, что вы на самом деле делаете, когда вы вызываете array.splice(0, 1, []), заменяет первый элемент пустым массивом, а не просто удаляет его.

Методы мутации массива Ractive следуют одной и той же форме, за исключением того, что первым аргументом является «путь к ключу» массива. Так что, если вы сделаете это ...

ractive1.splice('Posts', 0, 1); 

... it works correctly.