Unbind view model from view in knockout

前端 未结 3 1375
無奈伤痛
無奈伤痛 2020-12-29 18:58

I\'m looking for unbind functionality in knockout. Unfortunately googling and looking through questions asked here didn\'t give me any useful information on the topic.

相关标签:
3条回答
  • 2020-12-29 19:22

    @Mark Robinson answer is correct.

    Nevertheless, using Mark answer I did the following, which you may find useful.

      // 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);
    
    0 讨论(0)
  • 2020-12-29 19:32

    <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 gave perfect solution, I've similar problem with single dom element and updating different view models on this single dom element.

    Each view model has a click event, when click happened everytime click method of each view model is getting called which resulted in unnecessary code blocks execution during click event.

    I followed @Mark Robinson approach to clean the Node before apply my actual bindings, it really worked well. Thanks Robin. My sample code goes like this.

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

    0 讨论(0)
  • 2020-12-29 19:46

    You can use ko.cleanNode to remove the bindings. You can apply this to specific DOM elements or higher level DOM containers (eg. the entire form).

    See http://jsfiddle.net/KRyXR/157/ for an example.

    0 讨论(0)
提交回复
热议问题