从淘汰赛 3.2 中的自定义组件更新 observable答案

【问题标题】：Update observable from the custom components in knockout 3.2从淘汰赛 3.2 中的自定义组件更新 observable
【发布时间】：2014-11-08 19:38:45
【问题描述】：

我正在尝试使用 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>

问题是当我click on Up/Down function in my full JS fiddle.我明白了

未捕获的错误：无法将值写入 ko.computed，除非您指定一个“写”选项。如果您想读取当前值，请不要传递任何参数。

当然，我可以使用 var a = new Vm(); 并使用 a.yourVote(num); 从组件内部对其进行更新，但这打破了组件的整体理念。

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

【问题讨论】：

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

【解决方案1】：

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

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

您可以在这里阅读更多内容knockout 3.2 components（参数如何传递给组件）

提供参数来初始化组件，就像在组件绑定，但有一些区别：

如果参数自己创建依赖项（访问可观察的或计算的），那么组件将收到一个计算的返回值。这有助于确保整个组件不需要在参数更改时重建。组件本身可以控制它如何访问和处理任何依赖项。

Fixed JSFiddle DEMO

【讨论】：