Перехват привязки нокаута с плагином сопоставления

Question

Я пытаюсь использовать привязку кликов для увеличения и вычитания значения в привязке текста к одному. Я не уверен, как ссылаться на myNumber.

HTML:

<a data-bind="click: increment"> 
    <i class="fa fa-chevron-up"> </i> 
</a> 
<div data-bind="text: myNumber"></div> 
<a data-bind="click: subtract"> 
    <i class="fa fa-chevron-down"> </i> 
</a> 

ЯШ:

<script type="text/javascript"> 
    function increment(result){ 
     result.myNumber ++; 
    } 
    function subtract(result){ 
     result.myNumber --; 
    } 
    $.getJSON("/app/api/", function(result) { 

     function viewModel() { 
      return ko.mapping.fromJS(result); 
     }; 

     ko.applyBindings(new viewModel()); 
    }) 
    .error(function() { alert("error"); }); 
</script> 

Answer 1

Вы не увеличиваем наблюдаемым, как если бы это было число. Это сеттер/геттер. Кроме того, функции, которые вы связываете, должны быть частью модели viewmodel. Вы можете сделать это в своем обратном вызове getJSON до applyBindings.

vm = { 
 
    myNumber: ko.observable(3), 
 
    increment: function(result) { 
 
    result.myNumber(result.myNumber() + 1); 
 
    }, 
 
    subtract: function(result) { 
 
    result.myNumber(result.myNumber() - 1); 
 
    } 
 
}; 
 
ko.applyBindings(vm);

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<a href="#" data-bind="click: increment"> 
 
    <i class="fa fa-chevron-up"> </i> 
 
</a> 
 
<div data-bind="text: myNumber"></div> 
 
<a href="#" data-bind="click: subtract"> 
 
    <i class="fa fa-chevron-down"> </i> 
 
</a>