0

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 (非表示と表示される 2 番目の div) を表示することです。検証に合格した場合は、入力 (div1) の上に確認 div (div2) があるだけなので、ユーザーは新しい情報をすぐに入力できます。流れをスムーズに保つことがビジネス要件です。

4

1 に答える 1

2

あなたの意図はよくわかりませんが、マークアップではなくビューモデルに注目するとどうなるでしょうか。たとえば、実際のマークアップではなく、ビュー モデルでフィールドを定義し、値を交換します。次のように: 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-09T19:24:17.143 に答える