Puedes llamar a Ko.applyBindings para enlazar 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 interfaz de usuario de jQuery) con otra vista a la que se vincule un modelo de vista hijo separado.

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

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

Author: Cœur, 2011-09-08
Source

4 answers

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 usar esta técnica para vincular un ViewModel al contenido dinámico que carga en su 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.

 426
Author: RP Niemeyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-18 11:52:11

Mientras que la respuesta de Niemeyer es una respuesta más correcta a la pregunta, usted podría también 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 vincular varios modelos al mismo elemento, de esta manera:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
 60
Author: mhu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-05 15:40:14

He logrado 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 data-bind 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]);
 6
Author: ZiglioUK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-18 22:25:09

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

 0
Author: Sam Jacobs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-16 13:19:23