Использование рулей с Backbone

Ответ 1

Использовать handlebars.js вместо шаблонов underscore довольно просто. Проверьте этот пример:

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view (перейдите к разделу "Загрузка шаблона")

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#search_template").html(), {} );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

По сути, в основе лежит соглашение о создании HTML-кода в функции рендеринга. Использование шаблонизатора полностью зависит от вас (что мне нравится в Backbone). Так что вы просто измените его на:

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using Handlebars
        var template = Handlebars.compile( $("#search_template").html() );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

Поскольку вы используете require.js, вы можете сделать Handlebars зависимостью в верхней части вашего модуля. Я новичок в этом, но похоже, что обучение будет сосредоточено на шаблонах Backbone.js и использовании require.js.

Ответ 2

Я бы предпочел скомпилировать шаблон один раз (во время инициализации), таким образом вы избежите перекомпилировать шаблон с каждым рендерингом. Кроме того, вам нужно передать модель в скомпилированный шаблон, чтобы сгенерировать HTML:

SearchView = Backbone.View.extend({
  initialize: function(){
    // Compile the template just once
    this.template = Handlebars.compile($("#search_template").html());
    this.render();
  },
  render: function(){
    // Render the HTML from the template
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

Ответ 3

Если вы используете require.js, вы не сможете использовать текущий файл Handlebars. Я использовал следующий плагин Handlebars и, похоже, он обновляется с текущей версией. Просто замените файл Handlebars плагином выше, если Handlebars возвращает null в вашем модуле.

Ответ 4

define(["app", "handlebars",
    "text!apps/templates/menu.tpl"
], function (app, Handlebars, template) {

    return {
        index: Marionette.ItemView.extend({
            template: Handlebars.compile(template),
            events: {
                'click .admin-menu-ref': 'goToMenuItem'
            },
            goToMenuItem: function (e) {
               //......
            }
        })
    }
});


 new view.index({model: models});