-1

在阅读了新淘汰赛 3.2 中的自定义元素后，我尝试制作一些有用的东西，而不是真正直接使用它。

我试图制作一个分页元素，它将有一个当前元素，并允许用户从 currentpage - 2 到 currentpage + 2 选择页面。

问题是与 KO 示例相比，我的模板依赖于 observables。所以我试图通过创建 pureComputed 并在其中生成模板来克服它。但这不允许我在单击元素时添加回调。

ko.components.register('pagination', {
viewModel: function(params) {
    var self = this;
    this.page       = ko.observable(5);
    this.maxPage    = ko.observable(6);
    this.callback   = function(i){
        console.log(i);
    }
    this.template   = ko.pureComputed(function() {
        var page    = self.page(),
            minTmp  = page - 2,
            min     = minTmp < 1 ? 1 : minTmp,
            maxTmp  = page + 2,
            max     = maxTmp > self.maxPage() ? self.maxPage() : maxTmp,
            i, html = '';

        for (i = min; i <= max; i++){
            html += (i === page) ? '<li class="active"><a>'+i+'</a>':
            '<li data-bind="click: function(i){ callback(i) }"><a>'+i+'</a>';
        }
        return '<li><a href="#">«</a></li>'+ html +'<li><a href="#">»</a></li>';
    });
},
template: '<ul class="pagination pagination-sm" data-bind="html: template"></ul>'
});

这是jsFiddle。在实际代码中this.page，this.maxPage将从参数中获取。我不知道如何才能使所有这些工作。

4

1 回答 1

1

好吧，如果您的模板依赖于可观察对象，请尝试在模板本身中使用这些可观察对象，而不是在 for 循环中构建模板：

ko.components.register('pagination', {
    viewModel: function(params) {
        var self = this;
        this.min        = ko.observable(params.min || 1);
        this.max        = ko.observable(params.max || 10);
        this.page       = ko.observable(5);
        this.maxPage    = ko.observable(6);
        this.callback   = function(i){
            console.log(i);
        };
    },
    template: '<ul class="pagination pagination-sm" data-bind="foreach: new Array(max() - min())"><li data-bind="css: { active: $index() + 1 === $parent.page() }, click: function() { $parent.callback($index() + 1) }"><a data-bind="text: $index() + 1"></a></ul>'
});

ko.applyBindings();

http://jsfiddle.net/thvnwLs5/1/

编辑：

有多种指定模板的方法。一种方法是定义一个元素：

<template id="pagination-tpl">
    <ul class="pagination pagination-sm" data-bind="foreach: new Array(max() - min())">
        <li data-bind="css: { active: $index() + 1 === $parent.page() }, click: function() { $parent.page($index() + 1) }">
            <a data-bind="text: $index() + 1"></a>
        </li>
    </ul>
</template>

并像这样指定它template: { element: 'pagination-tpl' }。

见http://jsfiddle.net/thvnwLs5/3/

于 2014-09-02T06:53:52.447 回答