Carga dinĂ¡micamente vistas/plantillas en knockout.js
knockout-3.0 knockout-3.2 (2)
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)
}
}
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?
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) .