Убрать привязку модели просмотра к просмотру в нокауте

Ищу отключающий функционал в нокауте. К сожалению, поиск в Google и просмотр заданных здесь вопросов не дал мне никакой полезной информации по этой теме.

Я приведу пример, чтобы проиллюстрировать, какие функции требуются.

Допустим, у меня есть форма с несколькими входами. Также у меня есть модель представления, привязанная к этой форме. По какой-то причине в качестве реакции на действие пользователя мне нужно отвязать мою модель представления от формы, то есть, поскольку действие выполнено, я хочу, чтобы все мои наблюдаемые перестали реагировать на изменения соответствующих значений и наоборот - любые изменения, сделанные для наблюдаемых, не должны ' t влияют на значения входов.

Как лучше всего этого добиться?


mvvm forms knockout.js unbind
person ILya    schedule 14.06.2012    source источник

Ответы (3)


arrow_upward
49
arrow_downward

Вы можете использовать ko.cleanNode, чтобы удалить привязки. Вы можете применить это к определенным элементам DOM или контейнерам DOM более высокого уровня (например, ко всей форме).

См. Пример http://jsfiddle.net/KRyXR/157/.

person Mark Robinson    schedule 14.06.2012
comment
в следующий раз напишите getElementById, а не $ (# theid) [0], все равно лучше использовать JavaScript, а не jQuery для всего - person guy schaller; 06.03.2013
comment
Для проектов, в которых я использую jquery, я обычно предпочитаю отказаться от 1,5 мс, чтобы не набирать лишние 15 символов. Я думаю, что буду придерживаться селекторов jquery, когда у меня будет возможность. - person uɥƃnɐʌuop; 15.03.2013
comment
Я был бы удивлен, если бы это было даже более 1 мс. - person Jeffrey Kevin Pry; 10.12.2013
comment
NetworkError: 404 Not Found - ... / knockout-latest.debug.js. Фиксированная демонстрация здесь: jsfiddle.net/KRyXR/156 - person Michal B.; 11.03.2014
comment
Обратите внимание, что cleanNode() очищает (по крайней мере? В 2.2.1) этот узел своих обработчиков событий и т.д. Подробнее здесь: github.com/knockout/knockout/issues/1130 - person ruffin; 25.06.2014

arrow_upward
15
arrow_downward

@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);
person aamir sajjad    schedule 11.02.2013
comment
Мне пришлось использовать это после ручного отключения / включения элементов формы, чтобы восстановить автоматические enable привязки нокаута. - person casey; 14.06.2014

arrow_upward
1
arrow_downward 

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

person Raju Putchala    schedule 20.10.2016