Question

在新的淘汰赛3.2中阅读了custom element之后，我尝试制作一些有用的东西，并不是真的直截了当。

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

问题在于，与KO示例相比，我的模板依赖于可观察量。所以我试图通过创建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将取自params。我不知道如何才能完成所有这些工作。

Answer 1

好吧，如果您的模板依赖于observables，请尝试在模板中使用这些observable，而不是在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/

修改

There are different ways of specifying a template。一种方法是定义一个元素：

<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/

knockout自定义元素模板取决于observables

1 个答案: