40

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

どのような機能が必要かを説明する例を示します。

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

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

4

3 に答える 3

49

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

例については、 http：//jsfiddle.net/KRyXR/157/を参照してください。

于 2012-06-14T12:52:21.267 に答える
15

@マークロビンソンの答えは正しいです。

それでも、Mark Answerを使用して、次のことを行いました。

  // 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);
于 2013-02-11T09:42:58.067 に答える
1 

<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のアプローチに従って、実際のバインディングを適用する前にノードをクリーンアップしました。これは非常にうまく機能しました。ロビンに感謝します。私のサンプルコードは次のようになります。

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

于 2016-10-20T06:07:01.170 に答える