forms - ventajas - Desvincular el modelo de vista de la vista en knockout
mvc pdf (3)
La respuesta de @Mark Robinson es correcta.
Sin embargo, al usar la respuesta de Mark hice lo siguiente, que puede serle útil.
// 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);
Estoy buscando la funcionalidad de desvinculación en knockout. Desafortunadamente, la búsqueda de Google y las preguntas que se hicieron aquí no me proporcionaron información útil sobre el tema.
Proporcionaré un ejemplo para ilustrar qué tipo de funcionalidad se requiere.
Digamos que tengo un formulario con varias entradas. También tengo un modelo de vista vinculado a esta forma. Por alguna razón, como reacción a la acción del usuario, necesito desvincular mi modelo de vista del formulario, es decir, dado que la acción está completa, quiero que todos mis observables dejen de reaccionar en los cambios de los valores correspondientes y viceversa. Cualquier cambio realizado a los observables no debería t afecta los valores de las entradas.
¿Cuál es la mejor manera de lograr esto?
Puede usar ko.cleanNode para eliminar los enlaces. Puede aplicar esto a elementos DOM específicos o contenedores DOM de nivel superior (por ejemplo, el formulario completo).
Ver http://jsfiddle.net/KRyXR/157/ para un ejemplo.
<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 dio la solución perfecta, tengo un problema similar con el elemento dom individual y actualizo diferentes modelos de vista en este elemento dom individual.
Cada modelo de vista tiene un evento de clic, cuando se hace clic, ocurre cada vez que se llama al método de cada modelo de vista, lo que da como resultado la ejecución innecesaria de bloques de código durante el evento de clic.
Seguí el enfoque de @Mark Robinson para limpiar el nodo antes de aplicar mis enlaces actuales, realmente funcionó bien. Gracias Robin. Mi código de ejemplo es así.
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]);
});