如何在knockoutjs上触发点击事件的自定义绑定？

我想使用customBindings，但我不知道如何实现这一点。我听说有人说DOM操作不应该在ViewModel中混合使用，所以我试图创建CustomBindings。如何在knockoutjs上触发点击事件的自定义绑定？

这里的jsfiddle http://jsfiddle.net/Y3M6n/2/

这里是我的HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<div id="div1" class="row"> 
    Name <input type="text" data-bind="value: name" /> 
    Surname <input type="text" data-bind="value: surname" /> 
</div> 

<br/> 

<div id="div2" class="row"> 
    Name: <span data-bind="text:name"> 
    Surname: <span data-bind="text:surname"> 
</div> 

<button data-bind="click: submit" >Click</button>

这是我的js代码。

function Ctrl() { 
    var self = this; 
    self.name = ko.observable(); 
    self.surname = ko.observable(); 
    self.submit = function() { 
     alert('How do I swap the two divs here'); 
    } 
} 

ko.applyBindings(new Ctrl()); 

ko.bindingHandlers.swapDiv = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var div1 = $('#div1').html(); 
     var div2 = $('#div2').html(); 

     $('#div1').replaceWith(div2); 
     $('#div2').replaceWith(div1); 
    } 
};

我的目的是，第一个div示出的输入和一个用户点击按钮之后它应该显示的确认的div（第二个div，这将在墙根和示出）。如果它通过验证，那么只需在输入（div1）顶部确认div（div2），以便用户可以立即输入新信息。保持流量顺畅是业务需求。

来源

2014-02-09 toy

不确定你的意图，但是如果你不关注标记而是关注视图模型会怎么样。例如，在视图模型中定义字段并交换值，而不是实际标记。类似以下内容： http://jsfiddle.net/tabalinas/Y3M6n/1/

<div id="div1" class="row" data-bind="text: text1"> 
</div> 

<br/> 

<div id="div2" class="row" data-bind="text: text2"> 
</div> 

var vm = { 
     text1: ko.observable("Div 1"), 
     text2: ko.observable("Div 2"), 
     submit: function() { 
      var temp = vm.text1(); 
      vm.text1(vm.text2()); 
      vm.text2(temp); 
     } 
    };

我怀疑，自定义绑定应该用于此目的。它通常用于创建一些可重用组件或特定事件。

如果我错了，请澄清你的意图，我会尽力帮忙。

来源

2014-02-09 19:24:17 tabalin

感谢您的回复，我会更新我的问题。我的意图是，我想做一些计算，并在计算完成后，我想摆动两个div2，而不仅仅是内部的内容。 – toy

我已经更新了我的问题。非常感谢。 – toy

这很好。我很确定你可以用viewmodel来做到这一点。例如。使用“可见”绑定，取决于视域模型的领域。可能您还需要使用“css”绑定为对话框添加规格样式。 http://jsfiddle.net/tabalinas/Y3M6n/3/ – tabalin

如何在knockoutjs上触发点击事件的自定义绑定？

回答

相关问题