Question

据我所知，Backbone.js视图代表DOM元素。我从现有DOM中获取它，或者在el属性中动态创建它。

在我的情况下，我想从具有AJAX请求的服务器中获取它，因为我正在使用Django模板，并且不想将所有内容重写为JavaScript模板。

所以我定义了执行AJAX请求的el函数。

el: function() {
    model.fetch().success(function(response) {
        return response.template
    })
}

当然，它不起作用，因为AJAX请求是异步执行的。

这意味着我没有el属性，events也不起作用。我能解决吗？

也许Backbone.js框架不适合我的需求？我想要使用它的原因是为代码提供了一些结构。

P.S。我是Backbone.js的新手。

Answer 1

从另一个视图中执行你的ajax请求，或直接在使用jquery直接加载页面之后，在你下载模板后，然后使用正确的id / el或其他任何方式实例化你的主干视图类（取决于你存储的位置）你的ajax获取模板）。根据您的使用情况，这可能是也可能不是一种明智的方法。

另一种可能更典型的方法是使用一些占位符元素设置视图（说“加载”或其他），然后触发ajax，并在检索到更新的模板后，相应地更新视图（将占位符替换为您请求的实际模板。）

当/如果您使用新的/其他DOM元素更新视图时，您需要调用视图的delegateEvents方法将事件重新绑定到新元素，请参阅：

http://backbonejs.org/#View-delegateEvents

Answer 2

我遇到了类似的要求。在我的实例中，我运行的是asp.net，并希望从用户控件中提取模板。我建议的第一件事是研究Marionette，因为它可以帮助您避免在Backbone中编写大量的锅炉板代码。下一步是覆盖模板的加载方式。在这种情况下，我创建了一个使用Ajax从服务器检索HTML的函数。我找到了这个函数的一个例子，他们使用它来下拉html页面，所以我做了一些修改，所以我可以发出MVC类型的请求。我不记得我从哪里找到了这个想法;否则，我会在这里给出链接。

function JackTemplateLoader(params) {
    if (typeof params === 'undefined') params = {};
    var TEMPLATE_DIR = params.dir || '';

    var file_cache = {};

    function get_filename(name) {
        if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-'));
        return TEMPLATE_DIR + name;
    }

    this.get_template = function (name) {
        var template;
        var file = get_filename(name);
        var file_content;
        var result;
        if (!(file_content = file_cache[name])) {
            $.ajax({
                url: file,
                async: false,
                success: function (data) {
                    file_content = data; // wrap top-level templates for selection
                    file_cache[name] = file_content;
                }
            });
        }
        //return file_content.find('#' + name).html();
        return file_content;
    }

    this.clear_cache = function () {
        template_cache = {};
    };

}

第三步是覆盖Marionette加载模板的方法。我是在app.addInitializer方法中完成的。在这里，我正在初始化我的模板加载器并将其目录设置为路由处理程序。因此，当我想加载模板时，我只需在我的视图中设置模板：“templatename”，Backbone将从api / ApplicationScreens / templatename加载模板。我也在重写我的模板编译以使用Handlebars，因为ASP.net对＆lt;％=％＆gt;没有留下深刻的印象。句法。

    app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' });
    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) {
        if (name == undefined) {
            return "";
        } else {
            var template = app.JackTemplateLoader.get_template(name);
            return template;
        }
    };
    // compiling
    Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {
        var compiled = Handlebars.compile(rawTemplate);
        return compiled;
    };
    // rendering
    Backbone.Marionette.Renderer.render = function (template, data) {
        var template = Marionette.TemplateCache.get(template);
        return template(data);
    }

希望这会有所帮助。我一直在一个大型的动态网站上工作，它很顺利。我一直对使用Marionette和Backbone.js的整体功能和流程感到惊讶。

Backbone.js是否适合从服务器获取HTML？

2 个答案: