¿Puedes llamar a ko.applyBindings para vincular una vista parcial?
Estoy usando KnockoutJS y tengo una vista principal y un modelo de vista. Quiero que aparezca un cuadro de diálogo (el de jQuery UI) con otra vista a la que se vinculará un modelo de vista secundaria independiente.
El HTML para el contenido del diálogo se recupera usando AJAX, por lo que quiero poder llamar ko.applyBindingsuna vez que se haya completado la solicitud y quiero vincular el modelo de vista secundaria solo a la parte del HTML cargado a través de ajax dentro del div del diálogo.
¿Es esto realmente posible o necesito cargar TODAS mis vistas y modelos de vista cuando la página se carga inicialmente y luego llamar ko.applyBindingsuna vez?
ko.applyBindingsacepta un segundo parámetro que es un elemento DOM para usar como raíz.
Esto te permitiría hacer algo como:
<div id="one">
<input data-bind="value: name" />
</div>
<div id="two">
<input data-bind="value: name" />
</div>
<script type="text/javascript">
var viewModelA = {
name: ko.observable("Bob")
};
var viewModelB = {
name: ko.observable("Ted")
};
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));
</script>
Por lo tanto, puede utilizar esta técnica para vincular un modelo de vista al contenido dinámico que carga en su cuadro de diálogo. En general, solo debe tener cuidado de no llamar applyBindingsvarias veces a los mismos elementos, ya que se adjuntarán varios controladores de eventos.
Si bien la respuesta de Niemeyer es una respuesta más correcta a la pregunta, también puedes hacer lo siguiente:
<div>
<input data-bind="value: VMA.name" />
</div>
<div>
<input data-bind="value: VMB.name" />
</div>
<script type="text/javascript">
var viewModels = {
VMA: {name: ko.observable("Bob")},
VMB: {name: ko.observable("Ted")}
};
ko.applyBindings(viewModels);
</script>
Esto significa que no es necesario especificar el elemento DOM e incluso puedes vincular varios modelos al mismo elemento, así:
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
Logré vincular un modelo personalizado a un elemento en tiempo de ejecución. El código está aquí: http://jsfiddle.net/ZiglioNZ/tzD4T/457/
Lo interesante es que aplico el atributo de enlace de datos a un elemento que no definí:
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
