Переиспользование html шаблонов для Django (на backend-e) и для Backbone (на frontend-e)

Question

[13aby]

Допустим, что у нас есть интернет-магазин, а у магазина есть страница, на которой списком выводятся все имеющиеся товары. Все дальнейшее описание касается только этой страницы.

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

<ul class="items">
    {% for item in items %}
        {% include 'item.html' %}
    {% endfor %}
<ul>

В данном случае `item.html` - это файл шаблона одного товара в списке, который может иметь довольно сложную верстку. В цикле на страницу вставляются все товары и отдается HTML-контент.

На странице присутствует форма, которая позволяет фильтровать товары по стоимости, количеству и так далее. Тут в игру вступает Backbone - обновление списка товаров происходит без перезагрузки страницы, используется GET запрос в API магазина(/api/items/). В ответ приходит JSON, который содержит новый список товаров. Эти товары нужно отобразить на странице.

Код view для товара на frontend-e выглядит следующим образом:

app.ItemView = Backbone.View.extend({
    template: _.template('<li><%= item_title %></li>'),
    render: function () {
        this.el = this.template(this.model.toJSON());
        return this;
    }
});

Соответственно в переменной `this.el` будет хранится HTML-контент из шаблонизатора Underscore.

Каким образом можно отрендерить товар используя изначальный шаблон `item.html`?

Answer 1

[vinograd19]

Для этого нужно использовать js шаблонизаторы с синтаксисом django template engine. Например, swig. Вставляйте свой шаблон в html, например так:

<script id="item_template" type="x-swig-template">
{% verbatim %}
    {% include 'item.html' %}
{% endverbatim %}
</script>

И далее используйте swig:

var item = {name:'name', slug:'slug'};
var template = $('#item_template').html();
var item_html = swig.render(template,item);

Answer 2

[personaljs]

var ItemTemplate = require('tpl!temlates/item.html');
app.ItemView = Backbone.View.extend({
    template: _.template('<li><%= item_title %></li>'),
    render: function () {
        this.el = this.template(this.model.toJSON());
        this.addAll();
        return this;
    }
	addAll: function() {
		this.collection.each(this.addOne);
	},
	addOne: function (item) {
		this.$el.append(ItemTemplate({
			item:item
		}));
	}
});

Answer 3

[Василий Останин]

underscorejs.org/#template

ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string. You may define or omit any combination of the three. For example, to perform Mustache.js style templating:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

Так же в шаблон можно передавать примесь из вспомогательных функций, для эмулирования каких-либо функций из шаблонизатора Django, это из коробки умеет Marionette.js, на чистом Backbone.js будет выглядеть как-то так:

var TemplateHelper = {
   getName: function() {
       return 'name';
   }
};

var Bookmark = Backbone.View.extend({
  template: _.template(...),
  render: function() {
    this.$el.html(this.template(_.extend(this.model.attributes, TemplateHelper));
    return this;
  }
});