Knockout.js 淘汰自定义元素模板取决于可观察对象

在阅读了《新淘汰赛3.2》之后，我试图做一些有用的东西，但并没有真正直截了当地去做

我尝试创建一个分页元素，它将具有一个当前元素，并允许用户从currentpage-2到currentpage+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>'
});

ko.components.register（'pagination'{
viewModel:函数（参数）{
var self=这个；
this.page=ko.可观察（5）；
this.maxPage=ko.可观察（6）；
this.callback=函数（i）{
控制台日志（i）；
}
this.template=ko.pureComputed（函数（）{
var page=self.page（），
minTmp=第2页，
min=minTmp<1？1:minTmp，
maxTmp=第+2页，
max=maxTmp>self.maxPage（）？self.maxPage（）：maxTmp，
i、 html=''；
对于（i=min；i嗯，如果模板依赖于观察值，请尝试在模板本身中使用这些观察值，而不是在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();

ko.components.register（'pagination'{
viewModel:函数（参数）{
var self=这个；
this.min=ko.可观察（params.min | 1）；
this.max=ko.可观察（params.max | 10）；
this.page=ko.可观察（5）；
this.maxPage=ko.可观察（6）；
this.callback=函数（i）{
控制台日志（i）；
};
},
模板：'

编辑：

.一种方法是定义元素：

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


数据绑定：新数组（max（）-min（））>

谢谢。有没有一种方法可以做到这一点，而不必将所有内容都放在模板中？在html/模板中定义UI逻辑是一种非常好的方法，因此这可能是首选方法。但是，还有其他方法可以定义/指定模板；请参阅我的编辑。