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的数组变异方法遵循相同的形式，除了第一个参数是＆＃39; keypath＆＃39;数组。所以，如果你这样做......

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

... it works correctly

在Ractive.js中单击时删除第一个项目

1 个答案: