如何在列表更改时使有状态组件与同一列表项关联

Question

我正在从项目列表中渲染组件。在此列表中添加或删除项目时，组件将重新映射到其他项目，而不是在DOM中移动。这是一个问题，因为组件具有状态，例如滚动偏移量或注入的jQuery插件。

React的处理方法是向列表中呈现的组件添加“ key”属性。跨渲染使用该视图以将组件模板绑定到同一实例。 Ractive中有类似的机制吗？

似乎使用ractive的数组操作方法可以使组件保持同步。但是，我想将状态更改保持在Ractive之外。

let numbers = ['one', 'two', 'three'];
const ractive = new Ractive({
  target: '#target',
  template: `
    {{#each numbers}}
    <div class="num">{{.}}</div>
    {{/each}}
  `,
  data: { numbers: numbers }
});

// Add untracked state to the second element
ractive.findAll('.num')[1]['style']['background-color'] = 'red';
numbers.shift();
ractive.update();
// Second element remains red, even though the item it used to represent is now the first