Carga dinámicamente vistas/plantillas en knockout.js

knockout-3.0 knockout-3.2

Question

Tengo una mesa y quiero mostrarla de dos maneras diferentes. Diferente número de columnas y posición de su contenido y celdas. Me gustaría brindarles a los usuarios una forma de cambiar de una vista a otra con solo hacer clic en un botón.

Empecé a hacerlo simplemente usando el enlace visible , pero luego me di cuenta de que no era la forma correcta de hacerlo, ya que el contenido era simplemente invisible pero todavía se estaba cargando en el DOM. Estaba duplicando contenido en segundo plano y generando HTML no válido (atributos de id duplicados en ambas tablas, por ejemplo) y eso generaba problemas en el lado de jQuery.

Luego eché un vistazo al uso de plantillas knockout para lograrlo como en este ejemplo , y soluciona mis problemas anteriores y funciona, pero el uso de HTML dentro de las etiquetas <script> no me parece la solución más limpia.

No estoy seguro si el uso de componentes puede proporcionar alguna solución para estos casos, no pude encontrar ninguno.

¿Alguna sugerencia sobre cómo lidiar con este problema?

Answer 1

El uso de knockout components + AMD es definitivamente lo que estás buscando. Echa un vistazo a esto por Steve Sanderson, el autor de knockout . Explica cómo requirejs un SPA usando ko con requirejs . Debería aclarar tus dudas

Ejemplo:

...
<div data-bind="component: myDynamicComponent"> </div>
...

Luego, si tiene el cargador de componentes configurado para recuperar su plantilla & | o viewModel asincrónicamente puede tener myDynamicComponent como un observable:

function RootViewModel(){
var self = this;
this.myDynamicComponent = ko.observable(''some-component'');
this.someButtonClicked = function() {
self.myDynamicComponent(''some-other-component''); // this should render your other component async (only if you configured your component loader to do so)
}
}

Answer 2

Las plantillas dentro de las etiquetas de script son reemplazadas por las etiquetas de plantilla . Puede ver esta respuesta reciente que escribí para un ejemplo.

Actualización: No toda la documentación del componente Knockout se ha actualizado, pero está aquí .

Otra opción es cargar dinámicamente plantillas a través de AMD (require.js) .