Обновление, наблюдаемое из пользовательских компонентов в нокауте 3.2

Question

Я пытаюсь использовать пользовательские компоненты от нокаутом 3.2 и обновлять наблюдаемые изнутри компонента. Вот пример моего пользовательского компонента:

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. Я получаю

Uncaught Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.

Конечно, я могу использовать var a = new Vm(); и обновлять его изнутри компонента с a.yourVote(num);, но это разрушает саму идею компонентов.

Как я могу сделать это правильно?

Answer 1

Вы должны передать ваши наблюдаемыми в качестве параметров пользовательского компонента, вместо создания зависимостей:

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

Вы можете прочитать здесь knockout 3.2 components (Как PARAMS передаются в компонент)

The params are provided to initialize the component, like in the component binding, but with a couple of differences:

• If a parameter creates dependencies itself (accesses the value of an observable or computed), then the component will receive a computed that returns the value. This helps to ensure that the entire component does not need to be rebuilt on parameter changes. The component itself can control how it accesses and handles any dependencies.

Fixed JSFiddle DEMO