-1

新しいノックアウト 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>'
});

ここにjsFiddleがあります。実際のコードthis.pageでthis.maxPageは、params から取得されます。どうすればこのすべてを機能させることができるのかわかりません。

4

1 に答える 1