从knockout 3.2中的自定义组件更新observable

Question

我正在尝试使用knockout 3.2中的自定义组件并从组件中更新observable.以下是我的自定义组件的示例:

ko.components.register('voting', {
    viewModel: function(params) {
        var self        = this;
        this.votes      = params.votes;
        this.yourVote   = params.yourVote;

        this.callback   = function(num){
            self.yourVote(parseInt(num));  // here I am updating
            self.votes( self.votes() + parseInt(num) );
        };
    },
    template: { element: 'voting-tpl' }
});

它的模板看起来像这样:

<voting params="votes: votes(), yourVote: yourVote()"></voting>
<template id="voting-tpl">
    <div data-bind="click:function(){callback(1)}">Up</div>
    <div data-bind="text: votes"></div>
    <div data-bind="click:function(){callback(-1)}">Down</div>
</template>

问题是,当我点击我的完整JS小提琴中的向上/向下功能时.我明白了

未捕获错误:除非指定"写入"选项,否则无法将值写入ko.computed.如果要读取当前值,请不要传递任何参数.

当然,我可以var a = new Vm();从组件内部使用和更新它,a.yourVote(num);但这会破坏组件的整体概念.

我怎么能正确地做到这一点？

Answer 1

您应该将您的observable作为参数传递给自定义组件,而不是创建依赖项:

<voting params="votes: votes, yourVote: yourVote"></voting>     

你可以在这里阅读更多的敲门声3.2组件(如何将params传递给组件)

提供params来初始化组件,就像组件绑定一样,但有一些区别:

• 如果参数本身创建依赖项(访问observable或computed的值),则组件将接收返回值的computed.这有助于确保不需要在参数更改时重建整个组件.组件本身可以控制它访问和处理任何依赖项的方式.

修复了JSFiddle DEMO