Question

我正在尝试创建一个动态原型来加载json并在页面上显示分页。

我在显示可观察数组中的子项时遇到问题。我正在尝试让孩子们发短信和总信息数量。

当您使用下一个按钮点击时，第一个子对象正在显示，但我收到的错误是“item”未定义，但我不确定原因。

使用Javascript：

(function() {
'use strict';
ko.extenders.paging = function(target, pageSize) {
    var _pageSize = ko.observable(pageSize || 10),
        // default pageSize to 10
        _currentPage = ko.observable(1); // default current page to 1
    target.pageSize = ko.computed({
        read: _pageSize,
        write: function(newValue) {
            if (newValue > 0) {
                _pageSize(newValue);
            }
            else {
                _pageSize(10);
            }
        }
    });

    target.currentPage = ko.computed({
        read: _currentPage,
        write: function(newValue) {
            if (newValue > target.pageCount()) {
                _currentPage(target.pageCount());
            }
            else if (newValue <= 0) {
                _currentPage(1);
            }
            else {
                _currentPage(newValue);
            }
        }
    });

    target.pageCount = ko.computed(function() {
        return Math.ceil(target().length / target.pageSize()) || 1;
    });

    target.currentPageData = ko.computed(function() {
        var pageSize = _pageSize(),
            pageIndex = _currentPage(),
            startIndex = pageSize * (pageIndex - 1),
            endIndex = pageSize * pageIndex;

        return target().slice(startIndex, endIndex);
    });

    target.moveFirst = function() {
        target.currentPage(1);
    };
    target.movePrevious = function() {
        target.currentPage(target.currentPage() - 1);
    };
    target.moveNext = function() {
        target.currentPage(target.currentPage() + 1);
    };
    target.moveLast = function() {
        target.currentPage(target.pageCount());
    };

     target.getValueCount = function() {
            target.messages.value().length;
    };

    return target;
};
}());
/// -- End paging extender -- \\\

/// Sample View Model that has an observableArray extended with the paging extender
var ViewModel = function() {
var self = this;
self.items = ko.observableArray([
{value: '1', messages: []},
{value: '2', messages: [{value: 'some text', critical: true}, {value: 'some more text', critical: false}, {value: 'even more text', critical: false}]},
{value: '3', messages: []},
{value: '4', messages: []},
{value: '5', messages: [{value: 'some text', critical: true}]},
{value: '6', messages: []},
{value: '7', messages: []},
{value: '8', messages: []},
{value: '9', messages: []},
{value: '10', messages: []},
{value: '11', messages: []},
{value: '12', messages: []},
{value: '13', messages: []}]).extend({
    paging: 1
});
};


ko.applyBindings(new ViewModel());

HTML：

<div style="float:left; border: 1px solid black;">
Paged Array
<ul data-bind="foreach : items.currentPageData">
    <li data-bind="text: value"></li>
    <li data-bind="foreach: messages">
      <span data-bind="text: value"></span>
      <span data-bind="text: items.getValueCount"></span>
      <span data-bind="if: critical">
        <i class="fa fa-exclamation-triangle">!</i>
      </span>
    </li>
</ul>
</div>

有人能告诉我我做错了吗？

感谢乔

Answer 1

你在正确的道路上，所有的观察者都是函数（在knockout.js中）

进入foreach循环后

<ul data-bind="foreach : items.currentPageData">

淘汰赛将会解开＆＃39; （这不是正确的术语）为您提供的功能，让您可以访问原始值。

执行value().length时，您尝试访问该值，就好像它是一个函数一样。在这个时间点它不再是一个函数，而是函数包含的值。

要解决此问题，请移除()，使其看起来像value.length。

如何使用Knockout可观察数组获取子计数和显示消息

1 个答案: