Soy nuevo en knockout, así que voy a hacer muchas preguntas. Pero no soy nuevo en el enlace de datos. Así que me golpeo la cabeza con la diferencia entre mis expectativas y la realidad. Aquí hay una pregunta muy básica sobre applyBindings.
Parece que applyBindings tiene el parámetro "modelo de vista", que para mí es el gráfico de objeto de dominio (como objetos de javascript) más quizás cosas auxiliares adicionales agregadas para el propósito de la creación de la vista. ¡Pero lo que me falta por completo al principio es el alcance de los enlaces! Esperaba que esto se aplicara al elemento DOM principal actual. Pero no, se aplica globalmente , ¡en toda la página!
Entonces, ¿se espera que en un documento HTML solo pueda haber un modelo de vista? ¡Esto es muy sorprendente para mí! ¿Cómo se supone que debo crear una aplicación web de una sola página donde tengo un panel que muestra la libreta de direcciones, otro panel que muestra mis citas, otro panel que muestra una solicitud de préstamo para revisar y otro que muestra la suscripción de otro préstamo? Todas son cosas completamente diferentes, ¿realmente se supone que debo vincularlas todas en un solo modelo de vista?
En mi expectativa, vincula un objeto javascript a un elemento DOM, y todo lo que hay allí lo representa. Con cada nuevo elemento DOM anidado, el objeto de enfoque puede cambiar. Puede estar saliendo de algún enlace foreach del objeto principal. Pero entonces, dos elementos DOM hermanos (o primos) podrían estar sentados uno al lado del otro y tener un modelo de vista completamente diferente, y también un ciclo de vida diferente. Por ejemplo, mientras estoy en mi flujo de trabajo de suscripción, necesito abrir rápidamente una libreta de direcciones o mi calendario. Todo ello en una aplicación de una sola página. No debe haber interferencia global entre diferentes modelos de vista utilizados por diferentes elementos DOM no relacionados.
Y, sin embargo, aquí estamos con knockout. Veo que solo tiene un ko.applyBindings(viewModelObject) para toda la página.
¿Qué me estoy perdiendo? ¿Qué nos impide modificar ko.applyBindings para tomar dos argumentos, el modelo-objeto de vista y el elemento DOM en el que mostrarlo? Podría intentar hacer eso, pero me temo que si el knockout se ha diseñado con esta mentalidad global, podría haber muchos problemas al ejecutar la maquinaria del knockout más de una vez en la misma página.
Lo siento si estoy frustrando a las personas al disparar una respuesta ya. Pero como tengo un proyecto muy urgente, necesito tratar de resolver mis problemas lo antes posible, y estoy leyendo el código fuente del knockout, que está muy bien organizado y usa buenos nombres, por lo que es bastante inteligible; por lo tanto, he encontrado la respuesta yo mismo.
La respuesta es que sí, puede aplicar Bindings a un elemento principal que elija. El cuerpo del documento es solo el predeterminado si no dice nada.
Por lo tanto, de ahora en adelante, (le diré a mi equipo que) siempre llame a applyBindings con el segundo argumento especificado para rootNode. Como esto:
<div> ... all my UI elements for this thing ... ... then last element in this div: <script type="text/javascript">ko.applyBindings(viewModelObject, document.currentScript.parentElement);</script> </div>entonces, de esa manera puedo tener múltiples modelos de vista, cada uno en su propio elemento DOM.
Y, además, también, me preguntaba, ¿knockout no asigna de alguna manera el objeto modelo al elemento DOM? También podría hacer eso en mi etiqueta de script:
<div> ... all my UI elements for this thing ... ... then last element in this div: <script type="text/javascript"> const viewElement = document.currentScript.parentElement; viewElement.viewModelObject = viewModelObject; ko.applyBindings(viewModelObject, viewElement); </script> </div>y esto me permite, aunque solo sea para la depuración, encontrar el objeto del modelo de vista actual en el elemento DOM que es la raíz de una vista. (Sería bueno si eso sucediera también con todos los demás enlaces descendientes, pero ese es quizás el tema de otra pregunta).
De hecho, decidí poner en nuestra configuración general un reemplazo completo de la función ko.applyBindings:
ko._applyBindings = ko.applyBindings; ko.applyBindings(viewModelObject, rootNode, extendContextCallback) { rootNode = rootNode || document.currentScript.parentElement; rootNode.viewModelObject = viewModelObject; ko._applyBindings(viewModelObject, rootNode, extendContextCallback); }ahora ni siquiera tengo que convencer a mi equipo para que lo haga de esta manera, lo harán automáticamente, incluso sin ser conscientes de ello.