我正在尝试使用 customBindings,但我不知道如何实现这一点。我听到人们说不应该在 ViewModel 中混合 DOM 操作,所以这就是我尝试创建 CustomBindings 的原因。
这是 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),以便用户可以立即输入新信息。保持流畅是业务需求。