Javascript 如何使用backbonejs和requirejs动态加载视图和模板

我正在使用backbonejs创建一个form builder应用程序，希望了解如何动态加载视图 我有一个下拉列表，我可以选择什么类型的元素应该被添加，例如我选择输入字段。我有一些默认值，它们与formstemplate中的每个元素一起使用，并且基于选择的字段，我希望加载不同的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;
});

在这里，当我运行这段代码时，如果我放入$（“.formElement”）.html（u.template（inputTemplate）），我会在html中得到inputTemplate文本，而不是模板；它很好用。我只需要知道如何动态加载这些

---

提前感谢

如果您只想进行条件加载，您可以在任何地方调用require：

编辑（将函数参数添加到require语句中）

注意，我还做了一个u.bind（…，this）来维护执行范围。我知道这里不一定需要，但它确实派上了用场

---

我在我的应用程序中的几个地方这样做；尤其是当我只想在需要的时候加载模块时。

谢谢Brendan，但我仍然有同样的问题，如果我从下拉列表中选择某个内容，我只会看到文本inputTemplate，而不是加载的实际模板。如何加载模板？比如说，我从下拉列表中选择输入字段，我想用文本框加载模板，但现在我只看到文本框。。。我忘了函数输入。。。我已经在代码示例中纠正了这一点。另外，在你的回复中，你提到了文本框，但在你的代码中，我没有看到你在写模板——只有formsTemplate。太棒了，我不得不根据我的需要对它进行一些修改，但它可以工作，谢谢！

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);
        );
    }
}