Использование атрибута для идентификации объекта в ractivejs в списках

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>

Проблема с этим решением заключается в том, что когда я выбираю элемент в списке, ключевой путь (я верю) используется для идентификации выбранного элемента, поэтому, когда я нажимаю «Далее», выбираются те же элементы на следующей странице. Это несколько ожидаемо, но нежелательно.

Есть ли какой-то способ сказать ractive, что он должен использовать, например, свойство Id элемента в качестве идентификатора, а не ключевого пути, или я сделал что-то действительно глупое здесь?

Следует ли решать это совершенно по-другому?


ractivejs
person PEtter    schedule 29.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Технически, я думаю, то, что вы пытаетесь сделать, правильно, и есть ошибка (см. 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>
person martypdx    schedule 29.12.2014