Cómo cargar vistas y plantillas dinámicamente usando backbonejs y requirejs

Estoy creando una aplicación de creación de formularios usando backbonejs y me gustaría saber cómo cargar la vista dinámicamente. Tengo un menú desplegable donde puedo elegir qué tipo de elemento se debe agregar, por ejemplo, elijo el campo de entrada. Tengo algunos valores predeterminados que van con cada elemento que están en la plantilla de formularios y, según el campo elegido, quiero cargar diferentes plantillas html.

define([
  'jquery',
  'underscore',
  'backbone',
  'modal',
// Pull in the Collection module from above
  'collections/builder',
  'text!templates/forms/builder.html',
  'text!templates/forms/formsTemplate.html',
  'text!templates/forms/textBox.html',
  'models/builder'

], function ($, _, Backbone, popupModal, attributesCollection, builderTemplate, formsTemplate, inputTemplate, attributesModel) {
    var attributesBuilderView = Backbone.View.extend({
        el: $("#page"),
        initialize: function () {

        },
        render: function () {
            this.loadTemplate();
        },
        loadTemplate: function () {
            var that = this;
            this.el.html(builderTemplate);
        },
        // Listen to events on the current el
        events: {
            "change #attributeType": "loadAttributeTemplate"
        },
        loadAttributeTemplate: function () {
            if ( ($("#attributeType").val()) != '0') {
                $("#attributesArea").append(_.template(formsTemplate, { elementType:              $("#attributeType :selected").text(), _: _ }));
                var template = $("#attributeType").val() + 'Template';
                $(".formElement").html(_.template(template));
            }
        }
    });
    return new attributesBuilderView;
});

aquí, cuando ejecuto este código, obtengo el texto inputTemplate en el html en lugar de la plantilla si pongo $(".formElement").html(_.template(inputTemplate)); funciona bien. Solo necesito saber cómo cargarlos dinámicamente.

Gracias por adelantado

preguntado el 12 de junio de 12 a las 17:06

1 Respuestas

Puede realizar la llamada requerida en cualquier lugar si solo desea realizar una carga condicional:

editado (se agregaron los parámetros de la función a la instrucción require)

loadAttributeTemplate: function () {
    if ( ($("#attributeType").val()) != '0') {
        require(['text!templates/forms/builder.html',
            'text!templates/forms/formsTemplate.html',
            'text!templates/forms/textBox.html'], 
            _.bind(function(builder, formsTemplate, textBox) {
                $("#attributesArea").append(_.template(formsTemplate, { elementType:               $("#attributeType :selected").text(), _: _ }));
                var template = $("#attributeType").val() + 'Template';
                $(".formElement").html(_.template(template));
            },this);
        );
    }
}

Tenga en cuenta que también hice un _.bind(...,this) para mantener el ámbito de ejecución. Sé que no es necesariamente necesario aquí, pero es útil.

Hago esto en algunos lugares de mi aplicación; especialmente cuando quiero cargar módulos solo si los necesito y cuando los necesito.

Respondido el 12 de junio de 12 a las 18:06

Gracias Brendan, pero sigo teniendo el mismo problema: si selecciono algo del menú desplegable, solo veo la plantilla de entrada de texto en lugar de la plantilla real que se está cargando. ¿Cómo puedo cargar una plantilla? como decir, selecciono el campo de entrada del menú desplegable, quiero cargar la plantilla con el cuadro de texto, pero ahora solo veo el texto: Kishore

Vaya... Olvidé las entradas de la función... Lo he corregido en el ejemplo de código. Además, en su respuesta menciona el cuadro de texto, pero en ninguna parte de su código lo vi escribiendo la plantilla, solo la plantilla de formularios. - Brendan Dellumpa

Impresionante, tuve que modificarlo un poco para mi necesidad, pero funciona, ¡gracias! - Kishore

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.