Question

为了让附加的代码正常工作，我几乎花了很多时间在完全沮丧中玩耍。代码或多或少取自http://jsfiddle.net/rniemeyer/5Xr2X/。我的版本显示第一页，IE，前10行。单击下一步将触发pagedRows函数，但不会在我的生命中显示下一页数据。 Heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeelp。

附件是代码

<table>
   <tr>
       <th>Id</th>
       <th>Type</th>
       <th>Name</th>
    </tr>
  <tbody data-bind='template: { name: "fieldTemplate", foreach: pagedRows }'></tbody>
</table>

<a href="#" data-bind="click: previous, visible: pageIndex() > 0">Previous</a>
<a href="#" data-bind="click: next, visible: pageIndex() < maxPageIndex()">Next</a>

<script type="text/html" id="fieldTemplate">
    <tr>
         <td><span data-bind="text:FieldId" /></td>
         <td><span data-bind="text:Type" /></td>
         <td><span data-bind="text:Description" /></td>
    </tr>
</script>

<script>
    function ViewModel(jsondata) {
        var self = this;
        self.fields = ko.observableArray(jsondata);
        self.pageIndex = ko.observable(0);
        self.pageSize = ko.observable(10);

        self.pagedRows = ko.computed(function () {
            var size = self.pageSize();
            var start = self.pageIndex() * size;
            return self.fields.slice(start, start + size);
        });

        self.maxPageIndex = ko.computed(function () {
            return Math.ceil(self.fields().length / self.pageSize()) - 1;
        });

        self.next = function () {
            self.pageIndex(self.pageIndex + 1);
        }
        self.previous = function () {
            self.pageIndex(self.pageIndex - 1);
        }
    }

    $(function () {
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push({
                FieldId: i,
                Type: "Type" + i,
                Name: "Name" + i,
                Description: "Description" + i
            })
        }

        ko.applyBindings(new ViewModel(data));

    });
</script>

似乎疯狂地直截了当，但我只是没有得到它。任何帮助将不胜感激。

感谢

麦克

Answer 1

当您执行下一个/上一个动作时，您需要通过将其作为函数调用并从中添加或减去1来检索observable的值。所以，你想要这样做：

self.next = function() {
    self.pageIndex(self.pageIndex() + 1);
}
self.previous = function() {
    self.pageIndex(self.pageIndex() - 1);
}

Knockout js模板没有绑定到ko.computed

1 个答案: