在 Ractive.js 中删除第一项点击

Question

我有一个包含 4 个项目的列表，每次单击按钮时我都需要删除第一个项目。我基于 splice 方法实现了一个简单的解决方案，但它似乎只在第一次点击时起作用。任何进一步的点击都不会改变任何事情。

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

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

...it works correctly.

在 Ractive.js 中删除第一项点击

Remove the first item on click in Ractive.js

ractivejs