He actualizado a la 2.3.0 y ahora estoy recibiendo el error

No puede aplicar los enlaces de varias veces el mismo elemento.

que yo no estaba en 2.2.1.

Estoy obteniendo una vista parcial de mi controlador MVC y agregarlo a la página después de hacer clic en un href. El error ocurre la segunda vez que hago clic en el enlace para obtener la vista parcial. Estoy haciendo esto varias veces.

Hay una forma de borrar esto y evitar el error nuevo lanzado?

Aquí está mi código:

$.get(url + "GetAssignedCompaniesView?layoutId=" + layoutId + "&noCache=" + new Date().getMilliseconds(), function (result) {
              $("#editAssignedPartial").html($(result));
              showEditAssignedArea(true);
              $(window.document).ready(function () {
                 //error is thrown here
                 ko.applyBindings(self, window.document.getElementById("editAssigned"));
                 $("#layoutId").attr("value", layoutId);
                 updateTypeHiddenElement.attr("value", "companies");
      });
    });
<div id="editAssignedPartial">
</div>

$(document).ready(function () {
  'use strict';
  var vm = new Vm();
  ko.applyBindings(vm, document.getElementById("area1"));
});
InformationsquelleAutor Aligned | 2013-07-17

13 Comentarios

  1. 96

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

    ko.cleanNode($element[0]);

    debe hacer el truco. HTH.

    • Esto funcionó para mí.
    • no funciona para mí, pero gracias por la sugerencia.
    • lo que yo estoy haciendo: puedo crear un enlace personalizado, y en mi interior enlazar dinámicamente una variable a un elemento. Ver: stackoverflow.com/a/9370953/809536
    • Nueva pregunta: stackoverflow.com/questions/18883556/…
    • esto funcionó para mí var _data = $("view-data"); ko.cleanNode(_data);
    • ko.cleanNode() no parece ser la manera más recomendada para evitar el ‘aplicar los enlaces de varias veces el error». stackoverflow.com/a/15069509/538962
    • no se puede llegar a trabajar con $(«vista de datos») o $(‘#knockoutDiv’)[0].. se sigue dando la applybindings de error. He añadido el cleanNode llamada justo antes de la aplicación de enlaces.
    • No funciona para mí,el error con un solo enlace
    • Excelente. A mí me funcionó.

  2. 22

    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.

    • Solucionado mi problema. Yo estaba haciendo document.getElementById('#element1'). Se olvidó de que el # jquery cosa. De hecho, sería mucho mejor si knockout levantaría un elemento no existe en el DOM de error».
    • Tengo una condición de carrera? que se comporta de manera diferente de Chrome/FF/IE. Mi solución fue meterlo dentro de un try-catch que eliminan los síntomas y llegó a la página de trabajo. Después de leer esta respuesta también he comprobado si el control que existía antes de applyBindings y puede ver una diferencia entre los navegadores.
    • Ese era mi problema, yo estaba tratando de ejecutar el Jazmín de la unidad de pruebas y se preguntaba por qué este error ocurrió (los elementos de los viewmodels están conectados no fueron incluidos en el html de la prueba)
  3. 12

    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'));
    • He utilizado esta solución en un DevExtreme de aplicaciones móviles. Desde DevX ejecuta ko.applyBindings automáticamente tuve a ko.cleanNode primero y luego ko.applyBindings. Gracias Mitja!
    • ¿Por qué utilizar selector de jQuery en el cleanNode()?
    • Es un selector de jquery, pero la notación [0] se pone el objeto DOM de objeto jQuery. Estoy de acuerdo en que esto no era necesario y que es mejor usar puro DOM objeto o el objeto jQuery.
    • ¿por qué la gente recomienda el uso de ko.cleanNode? (y gracias a esto funcionó para mí)
  4. 12

    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.

    • El editAssignedPartial se agrega dinámicamente a la página, en un evento diferente a otros de la carga de la página. Si puedo quitar el applyBidndings de mi evento click, no. Hay una manera mejor de hacer la adición dinámica?
    • A veces tiene sentido obligar a una máquina virtual para ver más de una vez. Por ejemplo, en una interfaz de usuario con una barra de navegación y un div para mostrar el contenido de cada clickable navbar elemento, puede tener X cantidad de divs para X barra de navegación, elementos, o simplemente tener un div y se unen las VMs a ese div basado en qué elemento se hace clic.
    • Me encontré con el mismo problema. He de contenido dinámico que viene en que tengo que volver a enlazar.
    • Otro enfoque es el uso de plantillas. Usted puede agregar dinámicamente una plantilla <script type='text/html'>...</script> a una página para el control de contenido dinámico.
    • Me gusta la idea de usar plantillas en lugar de la cleanNode enfoque. Gracias por la sugerencia.
    • Me encontré con este problema por la necesidad de múltiples enlaces. Por ejemplo, la unión a Kendo UI redes que tienen botones en ellos. Referencia stackoverflow.com/questions/16342179/…
    • Knockout ciertamente lo hace de soporte de la aplicación de enlaces más que una vez a una página, siempre y cuando se aplican a los diferentes elementos. Como se menciona a continuación, si el ámbito elemento no existe, o si uno contiene al otro, o si uno de sus múltiples applyBindings llamada es para el ámbito global, aparecerá un mensaje de error: knockoutjs.com/documentation/observables.html
    • Sí, creo que estaba implícito en mi respuesta, pero parece que no es obvio para todos.
    • Pero usted dijo que «la meta es aplicar los enlaces de una vez a tu página». Se permiten enlaces a aplicarse más de una vez a una página, a pesar de los diferentes elementos. En diciendo: «nunca Se debe poner enlaces más de una vez a una vista», se debe aclarar que por «ver» que significa específicamente «elemento de html» y no de «página».
    • Tienes toda la razón. Voy a editar mi respuesta.

  5. 9

    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.

  6. 5

    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

  7. 4

    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.

  8. 1

    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.

    • Yup. Moviendo mi script incluyen desde antes de que el HTML de destino después de que el HTML que hizo el truco para mí.
  9. 1

    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>
  10. 1

    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»

  11. 1

    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).

  12. 0

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

    var vm = new MessagesViewModel()
    ko.applyBindings(vm)
    
    function ShowMessagesList() {
       vm.getData("MyParams")
    }
    
    setInterval(ShowMessagesList, 10000)
  13. 0
    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.

Dejar respuesta

Please enter your comment!
Please enter your name here