使用属性在列表中的 ractivejs 中标识实体

Question

function ListModel(listItems) {
    var self = this;
    this.name = "TestList";
    this.page = 0;
    this.maxPage = listItems.length / 10;
    this.items = function (pageNo) { return self.allItems.slice(pageNo * 10, (pageNo * 10) + 10); };
    this.allItems = listItems;
    this.nextPage = function() {
        this.set("page", self.page + 1);                
    }
    this.prevPage = function () {
        this.set("page", self.page - 1);
    }
}

使用此视图模型，我已成功使用此模板实现分页

<table>
    {{#items(page)}}
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td><input type="checkbox" name="{{selectedItems}}" value="{{.}}" /> </td>
    </tr>
    {{/items}}
</table>
<h2> Selected ITEMS</h2>
<table>
    {{#selectedItems}}
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>                    
    </tr>
    {{/selectedItems}}
</table>
<button disabled="{{!page}}" on-click="invoke(prevPage)">Prev</button><button disabled="{{!(page<maxPage -1)}}" on-click="invoke(nextPage)">Next</button>

这个解决方案的问题在于，当我在列表中选择一个项目时，keypath（i belive）用于识别所选项目，因此当我单击下一步时，下一页上的相同项目将被选中。这有点意料之中，但不可取。

有没有办法告诉 ractive 它应该使用例如项目的 Id 属性作为标识符而不是键路径，或者我在这里做了一些非常愚蠢的事情？

这应该以完全不同的方式解决吗？

Answer 1

从技术上讲，我认为您要做的是正确的，并且存在错误（请参阅 https://github.com/ractivejs/ractive/issues/1610）。

但是，您可以通过添加索引并在其上关联所选项目来解决此问题：

<table>
    {{#items(page):i}}
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td><input type="checkbox" name="{{selectedItems}}" value="{{i}}" /> </td>
    </tr>
    {{/items}}
</table>
<h2> Selected ITEMS</h2>
<table>
    {{#selectedItems}}
    {{#items(page)[i]}}
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>                    
    </tr>
    {{/items(page)[i]}}
    {{/selectedItems}}
</table>