web-dev-qa-db-ja.com

ノックアウトのビューからビューモデルをバインド解除

ノックアウトでアンバインド機能を探しています。残念ながら、ここで質問をグーグルで調べても、このトピックに関する有用な情報は得られませんでした。

必要な機能の種類を示す例を提供します。

いくつかの入力を持つフォームがあるとしましょう。また、このフォームにバインドされたビューモデルがあります。何らかの理由でユーザーのアクションに対する反応として、フォームからビューモデルをバインド解除する必要があります。つまり、アクションが完了したので、すべてのオブザーバブルが対応する値の変更に反応するのを停止し、逆も同様です。 tは入力の値に影響します。

これを達成するための最良の方法は何ですか？

formsmvvmknockout.jsunbind
38
ILya

ko.cleanNodeを使用して、バインディングを削除できます。これを特定のDOM要素または上位レベルのDOMコンテナ（フォーム全体など）に適用できます。

例は http://jsfiddle.net/KRyXR/157/ を参照してください。

48
Mark Robinson

@Mark Robinsonの答えは正しいです。

それでも、マークアンサーを使用して次のことを行いました。

  // get the DOM element
  var element = $('div.searchRestults')[0];
  //call clean node, kind of unbind
  ko.cleanNode(element);
  //apply the binding again
  ko.applyBindings(searchResultViewModel, element);
15
aamir sajjad
<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.debug.js"></script>
        <script type="text/javascript" src="clickHandler.js"></script>
    </head>
    <body>
        <div class="modelBody">
            <div class = 'modelData'>
                <span class="nameField" data-bind="text: name"></span>
                <span class="idField" data-bind="text: id"></span>
                <span class="lengthField" data-bind="text: length"></span>
            </div>
            <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button>
            <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button>
            <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button>
        </div>
    </body>
</html>

@Mark Robinsonは完璧な解決策を提供しました。私は単一のdom要素とこの単一のdom要素の異なるビューモデルを更新することで同様の問題を抱えています。

各ビューモデルにはクリックイベントがあり、各ビューモデルのクリックメソッドが呼び出されるたびにクリックが発生すると、クリックイベント中に不要なコードブロックが実行されます。

@Mark Robinsonのアプローチに従ってNodeをクリーンアップしてから実際のバインディングを適用しましたが、実際にうまくいきました。Robinに感謝します。サンプルコードは次のようになります。

function viewModel(name, id, length){
                var self = this;
                self.name = name;
                self.id = id;
                self.length = length;
        }
        viewModel.prototype = {
                showModelData: function(data){
                console.log('selected model is ' + data);
                if(data=='model1'){
                        ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel1, button1[0]);
                        console.log(viewModel1);
                }
                else if(data=='model2'){
                ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel3, button1[0]);
                        console.log(viewModel2);
                }
                else if(data=='model3'){
                ko.cleanNode(button1[0]);
                        ko.applyBindings(viewModel3, button1[0]);
                        console.log(viewModel3);
                }
        } 
        }
        $(document).ready(function(){
                button1 = $(".modelBody");
                viewModel1 = new viewModel('TextField', '111', 32);
                viewModel2 = new viewModel('FloatField', '222', 64);
                viewModel3 = new viewModel('LongIntField', '333', 108);
                ko.applyBindings(viewModel1, button1[0]);
        });
1
Raju Putchala