RequireJs 文本插件和 UnderscoreJs 模板

Question

好的人，

我正在使用 RequireJs 文本插件在我的 backbone 应用程序中引入下划线模板 (.html)。不幸的是，我的模板中的下划线代码被呈现为纯文本。

define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){

var BlogPostIndexView = Backbone.View.extend({

    initialize: function () {
       this.template = _.template($(Template).html(), {posts : this.collection});
       this.render();

    },

    render: function (Template) {
        this.$el.html(this.template);
        return this;
    }

});

return BlogPostIndexView;

});

这是我的视图代码，您可以看到我正在引入两个模板并进行设置。然而它被渲染为...

Globall Coach Blog Posts

<% _.each(posts, function(post){ %>
<%= _.escape(post.title) %>
<% }); %>

有人遇到过这个问题吗？

Answer 1

您似乎没有正确使用下划线模板功能。 Underscore 将字符串编译成一个函数，您可以在其中输入数据。所以你的代码应该是这样的：

define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){

var BlogPostIndexView = Backbone.View.extend({

    initialize: function () {
       this.template = _.template($(Template).html())({posts : this.collection});
       this.render();

    },

    render: function () {
        this.$el.html(this.template);
        return this;
    }

});

return BlogPostIndexView;

但我会进一步重构它，因为您通常希望使用最新数据动态重新渲染，所以我会将数据中的管道放入 "render" 方法中的模板而不是 "initialize".

所以我最好这样做：

define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){

var BlogPostIndexView = Backbone.View.extend({

    initialize: function () {
       this.template = _.template($(Template).html())
       this.render();

    },

    render: function () {
        this.$el.html(this.template({posts : this.collection}));
        return this;
    }

});

return BlogPostIndexView;

Answer 2

原来 @mu-is-to-short 是正确的，requireJs 文本模块 returns 原始 html.

这里是`define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){

var BlogPostIndexView = Backbone.View.extend({

    initialize: function () {
       this.template = _.template(Template);

    },

    render: function (Template) {
        this.$el.html(this.template({posts : this.collection.toJSON()}));
        return this;
    }

});

return BlogPostIndexView; 
});

RequireJs 文本插件和 UnderscoreJs 模板

RequireJs text plugin and UnderscoreJs templates

requirejs

backbone.js

underscore.js

requirejs-text