Question

我想使用Require.js文本为Backbone视图加载外部HTML模板！插件并使模板路径自定义（从视图'模板'属性获取模板路径）。问题是 - 模板异步加载和渲染我仍然没有它。这是我的代码：

自定义视图

define([
    'views/abstract/base-view',
], function (BaseView) {

    var AppView = BaseView.extend({

        el: '#app-view',

        template: 'app-view',

        initialize: function () {

            this.on('template:loaded', this.render, this);

            BaseView.prototype.initialize.apply(this, arguments);

        },

        render: function () {

            this.$el.empty();

            var html = this.template();

            this.$el.html(html);
        }
    });

    return AppView;

});

和要继承的抽象视图

define([], function () {

    var AbstractView = Backbone.View.extend({

        initialize: function(){
            this.setTemplate();
        },

        setTemplate: function(){
            var that = this;
            require(['3p/text!templates/' + this.template + '.tpl'], function(tpl) {
                that.template = _.template(tpl);
                that.trigger('template:loaded');
            });
        }
    });

    return AbstractView;

});

它有效，但我不喜欢听'模板：已加载'事件进行渲染。有什么建议？谢谢！

Answer 1

我遇到了同样的问题。为了避免异步行为，没有其他方法可以在某些文件中添加动态需求并在之前加载所有这些。

我做了类似于注射的东西。我在一个require中加载了所有动态模板，并在共享字典中放入了模板的路径。然后我使用_.template（require（注入[＆＃34; templateNAME＆＃34;]）），我现在得到了模板。

这个想法就像下一个：

define(["require"], function (require) {
    require(["text!path/of/the/template",
             ...  ]);

    window.inject = {};
    inject.templateNAME = "text!path/of/the/template";

然后你将使用这样的东西：

var tpl = require(inject[this.templateName]);
this.template = _.template(tpl);

Backbone.js - 使用Require.js文本插件预加载外部模板

1 个答案: