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);
    }
}

使用此viewmodel我已成功使用此模板实现分页

<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）来标识所选项目，因此当我单击Next时，将选择下一页面上的相同迭代。这在某种程度上是预期的，但不合需

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

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

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>

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

1 个答案: