如何在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上觸發點擊事件的自定義綁定？

回答

相關問題