Текстовый плагин RequireJs и шаблоны UnderscoreJs

Question

Хорошо люди,

Я использую текстовый плагин RequireJs для добавления шаблонов подчеркивания (.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

Повороты @mu-is-to-short были правильными, текстовый модуль requireJs возвращает необработанный html.

Здесь это `define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], функция (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; 
});

Answer 2

Похоже, вы не правильно используете функцию шаблона подчеркивания. Подчеркивание компилирует строку в функцию, в которую вы можете передавать данные. поэтому ваш код должен выглядеть так:

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;