Використання ручок з магістраллю - backbone.js, requirejs, handlebars.js

Я вивчаю магістраль / рулі / вимагаю. Я дивився по всьому онлайн і на ТО - чи є які-небудь навчальні посібники або веб-сайти, які ви можете направити мені на це, щоб надати корисну інформацію для використання керування замість підкреслення?

Відповіді:

Використання handlebars.js замість шаблону підкреслення досить просте. Перевірте цей приклад:

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 );
}
});

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

Я хотів би компілювати шаблон раз(під час ініціалізації), таким чином ви уникнете перекомпілювати шаблон з кожною візуалізацією. Крім того, вам необхідно передати модель до компільованого шаблону, щоб генерувати 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;
}
});

Якщо ви використовуєте require.js, ви не зможете використовувати поточний файл ручок. Я використав наступне Ручки плагіна і, здається, він був в курсі поточної версії. Просто замініть файл Handlebars плагіном вище, якщо Handlebars повертає null у вашому модулі.

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});