KnockoutJs v2.3.0 : Error no Se puede aplicar enlaces múltiples veces el mismo elemento

Sólo tienes que quitar los enlaces antes de utilizar ‘applyBindings’ de nuevo.

ko.cleanNode($element[0]);

debe hacer el truco. HTH.

Algo que puede suceder, así que se lanza esta excepción es la siguiente. Dicen que usted tiene:

ko.applyBindings(myViewModel1, document.getElementById('element1'));
...
ko.applyBindings(myViewModel2, document.getElementById('element2'));

Ahora, cuando tanto #element1 y #element2 no existen obtendrá el error. La razón es que Knockout del applyBindings cae de nuevo en el documento.el cuerpo como elemento raíz cuando #element1 y #element2 que no se encuentran. Ahora se trata de aplicar la unión de dos veces en el cuerpo…

No es una buena alternativa de knock-out, si usted me pregunta. Prefiero tener un claro mensaje de error de que el elemento no existe en el DOM (todavía).

Espero que esto ayuda a algunas personas.

Dos cosas son importantes, por encima de las soluciones:

1. Cuando se aplica a los enlaces, se necesita especificar el alcance (elemento) !!

2. Cuando el borrado de enlaces, debe especificar exactamente el mismo elemento que se utiliza para el ámbito.

Código está por debajo de

Marcado

<div id="elt1" data-bind="with: data">
    <input type="text" data-bind="value: text1" >
</form>

Unión de vista

var myViewModel = {
  "data" : {
    "text1" : "bla bla"
  }
}:

Javascript

ko.applyBindings(myViewModel, document.getElementById('elt1'));

Claro enlaces

ko.cleanNode(document.getElementById('elt1'));

Nunca se debe poner enlaces más de una vez a una vista. En el apartado 2.2, el comportamiento es indefinido, pero aún incompatible. En 2.3, se muestra ahora de forma correcta un error. Cuando el uso de octavos de final, el objetivo es aplicar los enlaces de una vez a la vista(s) en la página, a continuación, utilizar los cambios observables en el viewmodel para cambiar la apariencia y el comportamiento de su vista(s) en su página.

Hay una gran cantidad de respuestas para este problema, pero tengo un noobie respuesta.

Me encontré con que se me ha añadido la misma secuencia de Comandos en dos lugares y se estaba tratando de enlazar dos veces. Así que antes de tirar de su pelo en un simple error, asegúrese de que usted echa para este problema.

Finalmente he resuelto de la mina por la devolución de los { controlsDescendantBindings: true } en el init función de la unión de controlador. Ver este

Si va a reutilizar un elemento más y más (Un bootstrap de diálogo modal en mi caso), a continuación, llamar a ko.applyBindings(el) varias veces le causa este problema.

Lugar de sólo hacerlo una vez como esta:

if (!applied) {
    ko.applyBindings(el);
    applied = true;
}

O como este:

var apply = function (viewModel, containerElement) {
    ko.applyBindings(viewModel, containerElement);
    apply = function() {}; //only allow this function to be called once.
}

PS: Esto puede ocurrir más a menudo para usted si usa la asignación plugin y convertir sus datos en JSON a las características observables.

He tenido este error ocurre por una razón diferente.

He creado una plantilla para guardar/cancelar los botones que yo quería aparecer en la parte superior y la parte inferior de la página. Funciono a la primera, cuando tuve mi plantilla definida dentro de un <script type=»text/html»> elemento…. pero luego escuché si lo desea, podría crear una plantilla de ordinario elemento DIV en lugar.

(Esto funcionó mejor para mí, ya que yo estaba usando ASP.NET MVC y ninguno de mis @variableName la sintaxis de Afeitar se ejecuta en tiempo de ejecución desde el interior del elemento de secuencia de comandos. Así que al cambiar a un DIV en lugar de eso, yo todavía podría tener el MVC Razor motor de generar HTML dentro de mi KnockoutJs plantilla cuando se carga la página.)

Después de que he cambiado mi plantilla para usar un DIV en lugar de un elemento de secuencia de COMANDOS, mi código veía como este…. lo que funcionó bien en IE10. Sin embargo, más tarde cuando lo probé en IE8, arrojó que….

«No puede aplicar los enlaces de varias veces el mismo elemento» de error…..

HTML

<div id="mainKnockoutDiv" class="measurementsDivContents hourlyMeasurements">

  <div id="saveButtons_template" style="display: none;">
    ... my template content here ...
  </div>

  <!--ko template: { name: 'saveButtons_template' } -->
  <!--/ko-->

  Some_HTML_content_here....

  <!--ko template: { name: 'saveButtons_template' } -->
  <!--/ko-->

</div>

JavaScript

ko.applyBindings(viewModel, document.getElementById('mainKnockoutDiv'));

LA SOLUCIÓN:

Todo lo que tenía que hacer era mover mi saveButtons_template DIV abajo a la parte inferior, por lo que estaba fuera de la mainKnockoutDiv. Ya esta resuelto el problema para mí.

Supongo KnockoutJs estaba tratando de enlazar mi plantilla DIV varias veces debido a que se encontraba en el interior de la applyBindings área de destino… y no estaba usando el elemento de secuencia de COMANDOS…. y era que se hace referencia como una plantilla.

Estaba recibiendo el mismo error en IE7/IE8. Trabajó muy bien en todos los navegadores incluyendo IE9/IE10.

Lo que he encontrado trabajado para mí fue la eliminación de auto etiquetas de cierre.

Mal

<div>
    <span data-bind="text: name"/>
</div>

Buena

<div>
    <span data-bind="text: name"></span>
</div>

En mi caso, yo estaba sumando un no existente elemento, o, yo era la adición de enlaces a un elemento que tal vez existe, pero el padre no. Similar a este:

var segDiv =  $("#segments"); //did not exist, wrong id
var theDiv = segDiv.html("<div></div>");

ko.applyBindings(someVM, theDiv);

Medida de lo que puedo decir, este error parece un poco sobrecargado, en el sentido de que el fuego en un montón de diferentes errores que pueden suceder con el elemento, como no existente. Como tal, la descripción de un error pueden ser muy engañosos. Se debe probablemente ha leído:

«Error al enlazar los enlaces a elemento. Posibles razones incluyen: la unión de múltiples intentos, el elemento no existente, elemento no está en el DOM de la jerarquía, a las peculiaridades de los navegadores, etc»

Respuesta Actualizada

Ahora que podemos utilizar dataFor() para comprobar si el enlace se ha aplicado, prefiero compruebe el enlace de datos, en lugar de cleanNode() y applyBindings().

Como este:

var koNode = document.getElementById('formEdit');
var hasDataBinding = !!ko.dataFor(koNode);
console.log('has data binding', hasDataBinding);
if (!hasDataBinding) { ko.applyBindings(vm, koNode);}

Respuesta Original.

Un montón de respuestas ya!

Primero, digamos que es bastante común que necesitamos para hacer el enlace varias veces en una página. Decir, tengo un formulario en el interior de la modal de Bootstrap, que va a ser cargado de nuevo y de nuevo. Muchos de la forma de entrada tiene dos vías de enlace.

Yo suelo tomar el camino fácil: la limpieza de la unión cada vez que antes de la unión.

var koNode = document.getElementById('formEdit');
ko.cleanNode(koNode);
ko.applyBindings(vm, koNode);

Sólo asegúrese de que aquí koNode es necesario, para que, ko.cleanNode() requiere un nodo de elemento, aunque se pueden omitir en ko.applyBinding(vm).

yo tenía el mismo problema y lo resolví.

var vm = new MessagesViewModel()
ko.applyBindings(vm)

function ShowMessagesList() {
   vm.getData("MyParams")
}

setInterval(ShowMessagesList, 10000)

ko.cleanNode($("#modalPartialView")[0]);
ko.applyBindings(vm, $("#modalPartialView")[0]);

que funciona para mí, pero como otros nota, el cleanNode es interna ko función, por lo que es probable que exista una mejor manera.