Javascript 如何在knockoutjs上触发click事件的自定义绑定？

我正在尝试使用customBindings，但我不知道如何实现这一点。我听到有人说DOM操作不应该混合在ViewModel中，所以这就是为什么我尝试创建CustomBinding

这是JSFIDLE

这是我的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>

---

我的意图是，第一个div显示输入，用户单击按钮后，它应该显示确认div（第二个div，将隐藏并显示）。如果它通过了验证，那么只需在输入（div1）上添加确认div（div2），用户就可以立即输入新信息。保持流程顺畅是业务需求

不确定您的意图，但是如果您不关注标记，而是关注视图模型呢。 例如，在视图模型中定义字段并交换值，而不是实际标记。 例如：

var vm={
正文1:ko.可观察（“第1部分”），
正文2:ko.可观察（“第2部分”），
提交：函数（）{
var temp=vm.text1（）；
vm.text1（vm.text2（））；
vm.text2（临时）；
}
};

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

---

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

谢谢你的回答，我会更新我的问题。我的意图是，我想做一些计算，在计算完成后，我想改变两个div2，而不仅仅是里面的内容。这很好。我很确定你可以用viewmodel来做。例如，根据视场模型，使用“可见”绑定。您可能还需要使用“css”绑定来为对话框添加规范样式。

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 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);
        }
    };