Question

我不是一个大的JS或KO家伙。我试图让分页工作，并使分页部分工作。但是，当我去绑定每个项目的文本来填充我的表时，它是空的。我知道对象在那里，因为我获得了正确的行数和页数（每页3行，8页，因为我有24个对象）。我已经逐步完成了代码，并使用值验证了对象。我绑定到“页面”字段。当我深入研究它时，我在page._latestValue属性（3个对象的集合）上看到了这个集合。但是，以下代码为我提供了3行没有值。

<div data-bind="with: pagedList">
   <table class="table table-striped table-hover tablesorter">
      <thead>
        <tr>
            <th>FileName<span></span></th>
            <th>UploadDate<span></span></th>
            <th>LastAction<span></span></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: page">
        <tr>
            <td data-bind="text: $data.description"></td>
            <td data-bind="text: $data.fileuploaddate"></td>
            <td data-bind="text: $data.lastupdated"></td>
        </tr>
     </tbody>
  </table>
</div>

Javscript

(function (Utils, ko) {
        Utils.PagedObservableArray = function (options) {
            options = options || {};
            if ($.isArray(options))
                options = { data: options };
            var
            //the complete data collection
            _allData = ko.observableArray(options.data || []),

            //the size of the pages to display
            _pageSize = ko.observable(options.pageSize || 10),

            //the index of the current page
            _pageIndex = ko.observable(0),

            //the current page data
            _page = ko.computed(function () {
                var pageSize = _pageSize(),
                    pageIndex = _pageIndex(),
                    startIndex = pageSize * pageIndex,
                    endIndex = pageSize * (pageIndex + 1);

                return _allData().slice(startIndex, endIndex);
            }, this),

            //the number of pages
            _pageCount = ko.computed(function () {
                return Math.ceil(_allData().length / _pageSize()) || 1;
            }),

            //move to the next page
            _nextPage = function () {
                if (_pageIndex() < (_pageCount() - 1))
                    _pageIndex(_pageIndex() + 1);
            },

            //move to the previous page
            _previousPage = function () {
                if (_pageIndex() > 0)
                    _pageIndex(_pageIndex() - 1);
            };

            //reset page index when page size changes
            _pageSize.subscribe(function () { _pageIndex(0); });
            _allData.subscribe(function () { _pageIndex(0); });

            //public members
            this.allData = _allData;
            this.pageSize = _pageSize;
            this.pageIndex = _pageIndex;
            this.page = _page;
            this.pageCount = _pageCount;
            this.nextPage = _nextPage;
            this.previousPage = _previousPage;
        };
    })(ko.utils, ko);

在我的ViewModel创建函数中，我这样做。

 this.pagedList = new ko.utils.PagedObservableArray({
            data: data,
            pageSize: 3
        });

我错过了什么？

Answer 1

我已使用您的代码创建了此jsFiddle http://jsfiddle.net/rX4Rn/。

我添加了

var vm = function (data) {
    var self = this;

    self.pagedList = new ko.utils.PagedObservableArray({
        data: data,
        pageSize: 3
    });
    return self;
} 
ko.applyBindings(new vm(data));

它似乎有效。我们可能需要有关代码的更多详细信息以进一步提供帮助。

Knockout Binding具有正确的计数，但文本绑定显示空字符串

1 个答案: