Я изучаю Backbone/Handlebars/Require. Я посмотрел онлайн и на SO - есть ли какие-либо учебники или веб-сайты, на которые вы можете направить меня, это обеспечило бы полезную информацию для использования с использованием дескрипторов вместо подчеркивания?
Использование рулей с 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});