无法在knockout 3.2中使用自定义组件传递变量

时间:2014-09-03 07:43:54

标签: knockout.js knockout-3.0 knockout-components

我正在努力推进淘汰赛3.2中的自定义组件。如果我使用预定义的参数,一切都很好。例如,这是jsFiddle

但是当我从我的视图模型传递参数时(我已经阅读了如何操作here)我没有得到任何东西:jsFiddle。我做错了什么?

这是我的js代码:

ko.components.register('pagination', {
    viewModel: function (params) {
        var self = this;
        this.page = ko.observable(params.page);
        this.max = ko.observable(params.max);

        this.list = ko.pureComputed(function () {
            var a = self.page(),
                list = [],
                min = a - 2 < 1 ? 1 : a - 2,
                max = a + 2 > self.max() ? self.max() : a + 2;

            for (var i = min; i <= max; i++) {
                list.push(i);
            }
            return ko.observableArray(list);
        });

        this.callback = function (i) {
            console.log(i);
            self.page(i);
        };
    },
    template: {
        element: 'pagination-tpl'
    }
});

function Vm(){
    this.page = ko.observable(2);
    this.max = ko.observable(6);
}
var vm = new Vm();

ko.applyBindings(vm, document.getElementById('koBinding_somePage'));

1 个答案:

答案 0 :(得分:7)

linked article如何将params传递给组件部分解释了这种行为:

  

如果参数本身创建依赖项(访问可观察值或计算值),则组件将接收返回值的计算值。

因此,在您的情况下,params.pageparams.max包含计算的可观察属性,而不包含值。

所以你只需要将它们分配到你的本地字段:

viewModel: function (params) {
       var self = this;
       this.page = params.page;
       this.max = params.max;
       //...
}

演示JSFiddle