取消与映射插件的点击绑定

Knockout click binding with mapping plugin

本文关键字：绑定 插件 映射 取消      更新时间：2023-09-26

我试图使用单击绑定来增加和减去一个文本绑定中的值。我不确定如何引用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>

js: 

<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>

你不能把一个可观察对象当作一个数字来递增。它是一个setter/getter。此外，您绑定的函数需要成为视图模型的一部分。您可以在applyBindings之前的getJSON回调中执行此操作。

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>

相关文章：