बैकबोन के साथ हैंडलबार का उपयोग करना - backbone.js, requirejs, handlebars.js

मैं बैकबोन / हैंडलबार / आवश्यकता सीख रहा हूं। मैंने सभी ऑनलाइन और SO पर देखा है - क्या कोई ट्यूटोरियल या वेबसाइटें हैं जो मुझे निर्देशित कर सकते हैं कि अंडरस्कोर के बजाय हैंडलबार का उपयोग करने के लिए उपयोगी जानकारी प्रदान करेंगे?

उत्तर:

अंडरस्कोर टेम्पोलेटिंग के बजाय हैंडलबार.जेएस का उपयोग करना बहुत सीधा है। इस उदाहरण को देखें:

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 को रेंडर फंक्शन में बनाना है। टेम्प्लेटिंग इंजन का उपयोग पूरी तरह से आपके ऊपर छोड़ दिया जाता है (जो मुझे बैकबोन के बारे में पसंद है)। तो आप "बस इसे बदलने के लिए ...

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, आप अपने मॉड्यूल के शीर्ष पर हैंडलबार बना सकते हैं। मैं इस के लिए बहुत नया हूं, लेकिन यह लगता है कि सीखने के लिए बैकबोन.जेएस पैटर्न और आवश्यकता होती है। जेएस उपयोग।

मैं एक बार टेम्पलेट संकलित करना पसंद करूंगा(आरंभ के दौरान), इस तरह आप हर रेंडर के साथ टेम्पलेट को फिर से जोड़ने से बचते हैं। साथ ही, 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;
}
});

यदि आप आवश्यकता का उपयोग कर रहे हैं। तो क्या आप वर्तमान हैंडल फ़ाइल का उपयोग करने में सक्षम होंगे। मैंने निम्नलिखित का उपयोग किया हैंडलबार प्लगिन और ऐसा लगता है कि इसे वर्तमान संस्करण के साथ अद्यतित रखा जाएगा। यदि आपकी हैंडलबार्स आपके मॉड्यूल में अशक्त लौट रही है, तो बस अपनी हैंडलबार फ़ाइल को प्लगइन के साथ बदलें।

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