ajax - ventana - vista parciales mvc

¿Puedes llamar a ko.applyBindings para enlazar una vista parcial?

Question

Estoy usando KnockoutJS y tengo una vista principal y un modelo de vista. Quiero que aparezca un cuadro de diálogo (el jQuery UI) para abrir con otra vista a la que se debe vincular un modelo de vista hijo separado.

El HTML para el contenido del cuadro de diálogo se recupera utilizando AJAX, por lo que quiero poder llamar a ko.applyBindings una vez que la solicitud se haya completado, y quiero vincular el modelo de vista hijo a solo la parte del HTML cargado mediante ajax dentro del cuadro de diálogo div .

¿Es esto realmente posible o necesito cargar TODAS mis vistas y modelos cuando la página se carga inicialmente y luego llamar a ko.applyBindings una vez?

Answer 1

Debería consultar el enlace with , así como controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

Answer 2

Me las arreglé para enlazar 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]);

Answer 3

Si bien la respuesta de Niemeyer es una respuesta más correcta a la pregunta, también puede 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 tiene que especificar el elemento DOM, e incluso puede enlazar varios modelos al mismo elemento, como este:

<div>
  <input data-bind="value: VMA.name() + '' and '' + VMB.name()" />
</div>

Answer 4

ko.applyBindings acepta 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 viewModel al contenido dinámico que carga en su cuadro de diálogo. En general, solo debe tener cuidado de no llamar a applyBindings varias veces en los mismos elementos, ya que obtendrá varios controladores de eventos adjuntos.