Backbone.js के साथ जटिल इंटरफेस लिखना

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

बैकबोन वर्गों का एक सेट है, जो आकार में 4Kb से कम है, जो आपके कोड की संरचना बनाते हैं और उच्च गुणवत्ता वाले एमवीसी वेब एप्लिकेशन बनाने में मदद करते हैं।

बैकबोन कुंजी-मूल्य-संग्रहण और अपने स्वयं के ईवेंट, समृद्ध एपीआई के साथ संग्रह, विचारशील (मूल विचार) के साथ मॉडल पेश करके भारी जावास्क्रिप्ट अनुप्रयोगों की संरचना बनाता है, घोषणात्मक ईवेंट हैंडलिंग के साथ यह सब एक अनुप्रयोग में जोड़ता है जो एक RESTful JJ इंटरफ़ेस का समर्थन करता है।

बिना अंडरस्कोर के काम नहीं कर सकते। REST API का समर्थन करने और Backbone.View में DOM तत्वों के साथ काम करने के लिए, json2.js और jQuery जैसी लाइब्रेरी से कनेक्ट करने के लिए दृढ़ता से अनुशंसा की जाती है: jQuery या Zepto

लेख Backbone.js की संरचना की जांच करेगा, और चरणों में एक सरल टोडो एप्लिकेशन बनाया जाएगा।

यहाँ वे लाभ हैं जो बैकबोन हमें देता है।

की-वैल्यू स्टोरेज और कस्टम इवेंट्स

जब मॉडल की सामग्री बदलती है, तो मॉडल परिवर्तन के लिए सब्सक्राइब किए गए सभी ऑब्जेक्ट सूचना प्राप्त करते हैं और आगे की कार्रवाई कर सकते हैं। उदाहरण के लिए, दृश्य (मूल विचार) मॉडल में बदलावों को सुनते हैं और विचारों की स्थिति को बदलने वाले मॉडल के बजाय अपने राज्य को अपडेट करते हैं। ढीले युग्मन पैटर्न का उपयोग किया जाता है।

समृद्ध कार्यों की समृद्ध एपीआई

बैकबोन आपके डेटा को संसाधित करने के लिए बहुत उपयोगी सुविधाओं का एक गुच्छा लेकर आता है। अन्य भाषाओं के विपरीत, जावास्क्रिप्ट सरणियों में "अधूरा" होता है, जो बड़ी मात्रा में डेटा के साथ काम करने पर बहुत परेशानी होती है।

घोषणात्मक घटना के दृश्य

जिन दिनों आपने स्पेगेटी-जैसे कोड लिखे थे, वे समाप्त हो रहे हैं। आप प्रोग्रामेटिक रूप से यह निर्धारित कर सकते हैं कि कौन सी कॉलबैक किस ऑब्जेक्ट से जुड़ी है।

RESTful JSON इंटरफ़ेस

यदि आपको सर्वर से बात करने की आवश्यकता है, तो आपको "दृश्य" कोड में एक AJAX अनुरोध को निष्पादित करना होगा और आपको जो आवश्यक होगा वह मिलेगा। यह सब विभिन्न xhr एडेप्टर, वेब पॉकेट्स और लोकलस्टोरेज का उपयोग करके आंशिक रूप से सरल किया जाता है, लेकिन इसे सरल बनाया जा सकता है। इस तरह की इकाई को कई छोटे लोगों में विभाजित किया जाना चाहिए, बैकबोन इसमें हमारी मदद करेगा:

बैकबोन हमें डेटा को प्रस्तुति से अलग करने की क्षमता देता है। एक मॉडल जो डेटा के साथ काम करता है और सर्वर के साथ सिंक्रनाइज़ करता है, फिर जब दृश्य मॉडल को सुनता है और अपनी स्थिति बदलता है (HTML में ड्रा करता है)

मैं तुरंत उन प्रश्नों के उत्तर सूचीबद्ध करूंगा जो अब उत्पन्न हो सकते हैं:

क्या यह jQuery की जगह लेता है?

नहीं। वे अपने लक्ष्य में बहुत अलग हैं। बैकबोन उच्च-स्तरीय अमूर्त के साथ काम करता है, जबकि jQuery या इसी तरह के पुस्तकालय डोम के साथ काम करते हैं, घटनाओं को सामान्य करते हैं, और इसी तरह।

उनके पास अलग-अलग अनुप्रयोग हैं, यदि आप एक पुस्तकालय जानते हैं तो इसका मतलब यह नहीं है कि आपको दूसरे को जानने की आवश्यकता है। लेकिन एक जावास्क्रिप्ट डेवलपर के रूप में, आपको यह जानना होगा कि दोनों के साथ प्रभावी ढंग से कैसे काम किया जाए।

मैं उसका उपयोग क्यों करूं?

क्योंकि अक्सर इंटरफ़ेस कोड नेस्टेड कॉलबैक, DOM जोड़तोड़, HTML टेम्पलेट या फ़ंक्शन का एक गंदा सेट होता है जो डेटा का प्रतिनिधित्व करने के लिए HTML उत्पन्न करता है। बैकबोन इस अराजकता को नियंत्रित करने के लिए एक महान उपकरण प्रदान करता है।

मुझे इसका उपयोग कहां करना चाहिए?

बैकबोन भारी-शुल्क इंटरफेस और डेटा-संचालित अनुप्रयोगों के निर्माण के लिए आदर्श है। उदाहरण के लिए, GMail इंटरफ़ेस, नया ट्विटर या अन्य संबंधित अनुप्रयोग। बैकबोन जटिल अनुप्रयोगों को बनाना आसान बनाता है।

इसके साथ, आप सरल HTML पेज बना सकते हैं जो जावास्क्रिप्ट में समृद्ध हैं, लेकिन बड़े और बैकबोन को वेब एप्लिकेशन बनाने के लिए डिज़ाइन किया गया है।

क्या यह कैप्पुकिनो या स्प्राउटकोर जैसा दिखता है?

हाँ और नहीं। हां, क्योंकि, जैसा कि उपर्युक्त रूपरेखाओं में है, मुख्य लक्ष्य वेब अनुप्रयोगों के लिए जटिल इंटरफेस बनाना है। वे इस बात में भिन्न हैं कि बैकबोन बहुत हल्का है, उपरोक्त पुस्तकालयों में से कोई भी इसकी तुलना नहीं कर सकता है।

बैकबोन बेहद हल्का है, 4kb से कम है।

वास्तव में, 4kb के बारे में यह सच नहीं है: Backbone 4kb + Underscore.js 3kb + jQuery 31KH = 38kb

कैपुचिनो आपको उद्देश्य-जे में कोड लिखने के लिए मजबूर करता है, जबकि स्प्राउटकोर के विचारों को जावास्क्रिप्ट कोड में घोषित किया जाना चाहिए। लेकिन मैं इनमें से किसी भी दृष्टिकोण को गलत नहीं कह सकता, लेकिन बैकबोन के साथ आप नियमित जावास्क्रिप्ट लिखते हैं और नियमित रूप से HTML और सीएसएस का उपयोग करते हैं, आपको व्यावहारिक रूप से कुछ भी बदलने की आवश्यकता नहीं है।

क्या मैं बैकबोन के साथ अन्य पुस्तकालयों का उपयोग कर सकता हूं?

बेशक। न केवल DOM, AJAX के रैपर तक पहुंच, बल्कि टेम्प्लेट और स्क्रिप्ट लोडर भी। बैकबोन में बहुत, बहुत शिथिल युग्मित है - इसका मतलब है कि आप बैकबोन के साथ संयोजन में अपने लगभग सभी उपकरणों का उपयोग कर सकते हैं।

बैकबोन बनाएँ

सबसे पहले, बैकबोन में केवल मॉडल, दृश्य और संग्रह शामिल थे - नियंत्रक शामिल नहीं थे। समय के साथ, नियंत्रकों को जोड़ा गया। बैकबोन में अब 4 मुख्य वर्ग होते हैं:

• मॉडल (मॉडल)
• संग्रह (संग्रह)
• देखें (देखें)
• एक नियंत्रक (नियंत्रक)

संक्षेप में मुख्य कक्षाओं पर जाएं, फिर इस ज्ञान के आधार पर हम एक सरल एप्लिकेशन बनाएंगे।

आदर्श

विभिन्न चीजों को अलग-अलग MVC फ्रेमवर्क में मॉडल कहा जाता है। बैकबोन में, एक मॉडल को एक अलग इकाई कहा जाता है, निकटतम एनालॉग डेटाबेस में एक रिकॉर्ड है। लेकिन कोई कठिन और तेज़ नियम नहीं हैं। फ्रेमवर्क वेबसाइट से:

मॉडल उन सभी जावास्क्रिप्ट अनुप्रयोगों का दिल होते हैं जिनमें संवादात्मक डेटा और साथ ही अधिकांश तर्क होते हैं जो उन्हें फ़्रेम करते हैं: परिवर्तन, सत्यापन, गणना की गई संपत्ति और एक्सेस अधिकार।

एक मॉडल एक डेटासेट में गुण या विशेषताओं को पढ़ने और लिखने का एक तरीका है। यहाँ एक उदाहरण मॉडल है:

var Game = Backbone.Model.extend({}); 

आइए चीजों को थोड़ा जटिल करें:

 var Game = Backbone.Model.extend({ initialize: function(){ alert("Oh hey! "); }, defaults: { name: 'Default title', releaseDate: 2011, } }); 

ऑब्जेक्ट बनाए जाने पर प्रारंभिक विधि निष्पादित की जाएगी। इस विधि में, मैं कुछ भी उपयोगी नहीं कर रहा हूँ। डेटा के कुछ हस्तांतरित नहीं होने की स्थिति में मैं कई डिफ़ॉल्ट चर भी परिभाषित करता हूं।

आइए देखें कि विशेषताओं को कैसे पढ़ना और लिखना है। लेकिन पहले, एक वस्तु बनाएँ:

 //    var portal = new Game({ name: "Portal 2", releaseDate: 2011}); //     releaseDate var release = portal.get('releaseDate'); // 2011 //    portal.set({ name: "Portal 2 by Valve"}); 

आप सीधे विशेषताओं के साथ काम नहीं कर सकते (object.attribute), आपको डेटा को संशोधित या पुनर्प्राप्त करने के लिए एक विधि को कॉल करना होगा (मुझे लगता है कि प्रॉक्सी के आगमन के साथ स्थिति बदल जाएगी)।
अब सारा डाटा एप्लीकेशन मेमोरी में है। चलो उन्हें सर्वर पर सहेजें:

 portal.save(); 

क्या आपको कुछ ज्यादा की उम्मीद थी? AJAX? एक पंक्ति के साथ हम सर्वर को एक अनुरोध भेजते हैं। याद रखें कि अनुरोध का प्रकार बदलता है: यदि आप एक नई वस्तु बनाते हैं, तो एक POST अनुरोध भेजा जाएगा, अन्यथा PUT होगा।
मैंने संक्षेप में मॉडलों पर छुआ। बैकबोन मॉडल के साथ काम करने के लिए काफी अधिक विकल्प प्रदान करता है। विवरण प्रलेखन में पाया जा सकता है।

संग्रह

बैकबोन में संग्रह केवल मॉडलों का एक संग्रह है। एक संग्रह डेटाबेस के साथ सादृश्य द्वारा, ये स्ट्रिंग (मॉडल) वाले डेटाबेस प्रश्नों के परिणाम हैं।
चलो खेल का एक संग्रह बनाएँ:

 var GamesCollection = Backbone.Collection.extend({ model : Game }); 

ध्यान देने योग्य पहली बात, हम यह निर्धारित करते हैं कि संग्रह में कौन से मॉडल शामिल हैं। हमने गेम मॉडल से मिलकर गेम्स का एक संग्रह बनाया है।

अब आप डेटा के साथ काम कर सकते हैं। उदाहरण के लिए, चलिए पुराने खेलों को परिभाषित करने वाली पद्धति को जोड़कर संग्रह का विस्तार करते हैं।

 var GamesCollection = Backbone.Collection.extend({ model : Game, old : function() { return this.filter(function(game) { return game.get('releaseDate') < 2009; }); } }); 

सरल, सही? हम सिर्फ उन खेलों की जांच करते हैं जो 2009 से पहले बनाए गए थे और उन्हें वापस कर दिया। आप सीधे संग्रह का प्रबंधन भी कर सकते हैं:

 var games = new GamesCollection games.get(0); 

ऊपर दिया गया उदाहरण एक नया संग्रह बनाता है और ID 0. के साथ मॉडल प्राप्त करता है। आप ऑब्जेक्ट की स्थिति के लिंक के माध्यम से एक विशिष्ट स्थिति में तत्व पा सकते हैं: games.at(0);

और अंत में, आप गतिशील रूप से इस तरह से अपने संग्रह की भरपाई कर सकते हैं:

 var GamesCollection = Backbone.Collection.extend({ model : Game, url: '/games' }); var games = new GamesCollection games.fetch(); 

हम बैकबोन को सूचित करते हैं जिसकी मदद से डेटा का प्रबंधन करने के लिए यूआरएल। अगला, हम बस एक नई वस्तु बनाते हैं और fetch विधि कहते हैं, जो सर्वर से डेटा के लिए एक अतुल्यकालिक अनुरोध की ओर जाता है और संग्रह को पॉप्युलेट करता है।

अब आप बैकबोन संग्रह की मूल बातें जानते हैं। जैसा कि मैंने ऊपर उल्लेख किया है, वहाँ अभी भी उपयोगी चीजें हैं जो बैकबोन कर सकती हैं, उदाहरण के लिए, अंडरस्कोर लाइब्रेरी के सभी तरीके। प्रयोग करने से पहले प्रलेखन पढ़ें।

राय

पहली नज़र में, दृश्य भ्रामक लग सकते हैं। शुद्ध एमवीसी के विपरीत, बैकबोन के विचारों में नियंत्रक कार्यों का हिस्सा है।

प्रजातियों की जिम्मेदारियों में शामिल हैं:

• DOM इवेंट्स, मॉडल्स और कलेक्शन को सुनना।
• आवेदन राज्य का प्रतिनिधित्व (देखें प्रतिपादन)।

आइए एक सरल दृश्य बनाएँ:

 var GameView = Backbone.View.extend({ tagName: "div", className: "game", render: function() { //    } }); 

सब कुछ बहुत सरल है। मैं बस यह निर्धारित करता हूं कि दृश्य को लपेटने के लिए कौन सा HTML तत्व का उपयोग किया जाना चाहिए (टैगनाम और क्लासनेम)।

निम्नलिखित कोड एक दृश्य प्रस्तुत करता है:

  render : function() { this.el.innerHTML = this.model.get('name'); //   jQuery: $(this.el).html(this.model.get('name')); } 

el उस तत्व को संदर्भित करता है जो इस दृश्य का प्रतिनिधित्व करता है। हम बस HTML एलिमेंट में गेम का नाम डालते हैं। जाहिर है, jQuery का उपयोग करना थोड़ा सरल है।

अधिक जटिल मार्कअप में, जावास्क्रिप्ट के अंदर HTML कोड का उपयोग थकाऊ और व्यर्थ है। इन मामलों में, यह पैटर्न का उपयोग करने के लायक है।

बैकबोन का अपना स्वयं का टेंपलेटिंग इंजन (अंडरस्कोर.जेएस का हिस्सा) है, लेकिन आप किसी भी तरह के टेम्पलेट का उपयोग करने के लिए स्वतंत्र हैं।

अंत में, आइए देखें कि प्रजातियां घटनाओं को कैसे सुनती हैं। पहले DOM इवेंट।

 events: { 'click .name': 'handleClick' }, handleClick: function(){ alert('In the name of science... you monster'); // Other actions as necessary } 

बेशक, jQuery के रूप में परिचित नहीं है, लेकिन यह भी सरल है। हम निर्धारित करते हैं कि ईवेंट ऑब्जेक्ट के माध्यम से हम कौन सी घटनाओं को सुनते हैं। जैसा कि आप ऊपर दिए गए कोड से देख सकते हैं, पहला भाग घटना को संदर्भित करता है, और अगला उस फ़ंक्शन को परिभाषित करता है जो घटना से जुड़ा हुआ है।

अब हम अपने विचार को मॉडल से जोड़ेंगे:

 var GameView = Backbone.View.extend({ initialize: function (args) { _.bindAll(this, 'changeName'); this.model.bind('change:name', this.changeName); } }); 

ध्यान देने वाली पहली बात यह है कि हम अपने बंधन कोड को इनिशियलाइज़ फंक्शन में कैसे रखते हैं। मेरा मानना ​​है कि घटनाओं को बांधने के लिए शुरुआती जगह सबसे अच्छी है।

bindAll एक अंडरस्कोर विधि है जो इस संदर्भ को एक फ़ंक्शन से बांधती है। यह घटनाओं में विशेष रूप से उपयोगी है।

अब, जैसे ही मॉडल का नाम बदला जाता है, चेंजनाम फ़ंक्शन changeName । आप change: बजाय अन्य उपसर्गों का उपयोग कर सकते change: मॉडल की स्थिति को क्वेरी करने के लिए।

नियंत्रक

नियंत्रकों ने आपको ऐसे एप्लिकेशन बनाने की अनुमति दी है जो हैश url (हैशबैंग) में अपने राज्य को याद करते हैं।

 var Hashbangs = Backbone.Controller.extend({ routes: { "!/": "root", "!/games": "games", }, root: function() { //      }, games: function() { //      } }); 

यह पारंपरिक सर्वर MVC चौखटे में मार्गों के समान है। उदाहरण के लिए !/games एक फ़ंक्शन से जुड़ा होगा जबकि ब्राउज़र में URL domain/#!/games ।

हैशबैंग का उपयोग करके , आप वेब एप्लिकेशन बना सकते हैं जो उनके राज्य को याद करते हैं और Google द्वारा अनुक्रमित किए जा सकते हैं ।

अगर आपको डर है कि इससे बैक बटन टूट जाएगा, तो बैकबोन इसकी देखभाल कर सकती है।

 //   var ApplicationController = new Controller; Backbone.history.start(); 

बैकबोन #hash में परिवर्तन की निगरानी करता है और नियंत्रकों को सूचित करता है।

अब जब आप बैकबोन की मूल बातें जानते हैं, तो आइए एक परीक्षण एप्लिकेशन बनाने का प्रयास करें।

उदाहरण: टोडो सूची

यह ऐप Jérôme Gravel-Niquet द्वारा बनाया गया था। यह ब्राउज़र में आपके डेटा को बचाने के लिए एक साधारण लोकलस्टेज एडाप्टर का उपयोग करता है (मैं एडॉप्टर पर नहीं रुकता, इसके कोड को देखें - वहां सब कुछ बेहद सरल है)। देखें कि कोड को बेहतर समझने के लिए आखिर में क्या होता है: टोडो सूची

टुडू मॉडल

हमारा आधार मॉडल एक सूची टूडू तत्व का वर्णन करता है जिसमें content , order और done गुण हैं।

  window.Todo = Backbone.Model.extend({ //     ,    //    ,       default EMPTY: "empty todo...", //     `content`,    initialize: function() { if (!this.get("content")) { this.set({"content": this.EMPTY}); } }, //   `done` toggle: function() { this.save({done: !this.get("done")}); }, //   localStorage    clear: function() { this.destroy(); this.view.remove(); } }); 

टुडू संग्रह

टुडू संग्रह को लोकलस्टोरेज में संग्रहित किया जाता है

  window.TodoList = Backbone.Collection.extend({ //       Todo model: Todo, //      "todos"  localStorage localStorage: new Store("todos"), //     ,   done: function() { return this.filter(function(todo){ return todo.get('done'); }); }, //     ,    remaining: function() { return this.without.apply(this, this.done()); }, //     ,          . //      GUID   .      . nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, //        comparator: function(todo) { return todo.get('order'); } }); //     window.Todos = new TodoList; 

देखें - टुडू तत्व

  // DOM    window.TodoView = Backbone.View.extend({ //    tagName: "li", //   //      template: _.template($('#item-template').html()), //  DOM,     events: { "click .check" : "toggleDone", "dblclick div.todo-content" : "edit", "click span.todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" }, // TodoView      . //     ---,     //    . initialize: function() { _.bindAll(this, 'render', 'close'); this.model.bind('change', this.render); this.model.view = this; }, //   render: function() { $(this.el).html(this.template(this.model.toJSON())); this.setContent(); return this; }, //   XSS   `jQuery.text`     setContent: function() { var content = this.model.get('content'); this.$('.todo-content').text(content); this.input = this.$('.todo-input'); this.input.bind('blur', this.close); this.input.val(content); }, //   "done"   toggleDone: function() { this.model.toggle(); }, //      edit: function() { $(this.el).addClass("editing"); this.input.focus(); }, //   ,   close: function() { this.model.save({content: this.input.val()}); $(this.el).removeClass("editing"); }, //   `enter`,    updateOnEnter: function(e) { if (e.keyCode == 13) this.close(); }, //  DOM  remove: function() { $(this.el).remove(); }, //     clear: function() { this.model.clear(); } }); 

देखें - आवेदन

यह हमारे आवेदन का मूल दृष्टिकोण है।

  window.AppView = Backbone.View.extend({ //  ,        HTML  el: $("#todoapp"), //    //      statsTemplate: _.template($('#stats-template').html()), //       ,   events: { "keypress #new-todo": "createOnEnter", "keyup #new-todo": "showTooltip", "click .todo-clear a": "clearCompleted" }, //        : //  , , .     ,   //   localStorage initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); }, //   -  .   . render: function() { var done = Todos.done().length; this.$('#todo-stats').html(this.statsTemplate({ total: Todos.length, done: Todos.done().length, remaining: Todos.remaining().length })); }, //   .      `<ul>` addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); }, //    addAll: function() { Todos.each(this.addOne); }, //      newAttributes: function() { return { content: this.input.val(), order: Todos.nextOrder(), done: false }; }, //   return      -   . //            createOnEnter: function(e) { if (e.keyCode != 13) return; Todos.create(this.newAttributes()); this.input.val(''); }, //    ,   . clearCompleted: function() { _.each(Todos.done(), function(todo){ todo.clear(); }); return false; }, //      . showTooltip: function(e) { var tooltip = this.$(".ui-tooltip-top"); var val = this.input.val(); tooltip.fadeOut(); if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout); if (val == '' || val == this.input.attr('placeholder')) return; var show = function(){ tooltip.show().fadeIn(); }; this.tooltipTimeout = _.delay(show, 1000); } }); //  -    window.App = new AppView; 

एनोटेशन वाले मूल को यहां देखा जा सकता है।

HTML टेम्पलेट्स और सीएसएस

  <!--  --> <div id="todoapp"> <div class="title"> <h1>Todos</h1> </div> <div class="content"> <div id="create-todo"> <input id="new-todo" placeholder="What needs to be done?" type="text" /> <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span> </div> <div id="todos"> <ul id="todo-list"></ul> </div> <div id="todo-stats"></div> </div> </div> <!--  --> <script type="text/template" id="item-template"> <div class="todo <%= done ? 'done' : '' %>"> <div class="display"> <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> /> <div class="todo-content"></div> <span class="todo-destroy"></span> </div> <div class="edit"> <input class="todo-input" type="text" value="" /> </div> </div> </script> <!--  --> <script type="text/template" id="stats-template"> <% if (total) { %> <span class="todo-count"> <span class="number"><%= remaining %></span> <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left. </span> <% } %> <% if (done) { %> <span class="todo-clear"> <a href="#"> Clear <span class="number-done"><%= done %></span> completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span> </a> </span> <% } %> </script> 

मैं CSS लागू नहीं करता, यह बहुत लंबा और पूरी तरह से विषय है।

यही है, हमारा परीक्षण आवेदन तैयार है, परिणाम यहां पाया जा सकता है ।

आप बैकबोन से क्या सीख सकते हैं

बैकबोन एप्लिकेशन आर्किटेक्चर से कुछ सबक आप यहां सीख सकते हैं:

• हमें वास्तव में इंटरफ़ेस के लिए MVC की आवश्यकता है। पारंपरिक तरीके ऐसे कोड बनाते हैं जो बहुत दृढ़ता से खुद से बंधे होते हैं, यह गंदा और बनाए रखना मुश्किल होता है।
• DOM में डेटा और स्टेट्स रखना एक बुरा आइडिया है। यह विशेष रूप से तीव्र है यदि आप एक ऐसा एप्लिकेशन बना रहे हैं जिसमें एक ही डेटा का उपयोग करके एप्लिकेशन के विभिन्न हिस्सों को अपडेट किया जाना आवश्यक है।
• मोटे मॉडल और पतले नियंत्रक अच्छे हैं। मॉडल द्वारा व्यावसायिक तर्क संचालित किए जाने पर विकास प्रक्रिया बहुत सरल हो जाती है।
• टेम्प्लेट बहुत महत्वपूर्ण हैं। अपने जावास्क्रिप्ट के अंदर HTML जोड़ने से आपको बुरे कर्म मिलते हैं।

यह कहने के लिए पर्याप्त है कि बैकबोन कम से कम मेरे लिए इंटरफेस बनाने की अवधारणा को बदल रहा है। यदि आपके कोई प्रश्न हैं, तो पूछें।

वे स्रोत जो लिखते समय उपयोग किए जाते थे

Backbone.js (जिम हॉकिंस) के साथ जावास्क्रिप्ट ऐप्स बनाएं
Backbone.js (सिद्धार्थ) के साथ शुरुआत करना
एडाप्टर बैकबोन-लोकोस्टोरेज
टोडोस उदाहरण (जेरोम ग्रेवल नुकीट)
टिप्पणी के साथ Todos.js स्रोत

और क्या पढ़ना है

गिटहब बैकबोन डॉक्यूमेंटेशन
जीथब पर अंडरस्कोर प्रलेखन
नोड ट्यूटोरियल भाग 19: बैकबोन.जेएस (एलेक्स यंग)
एक बड़ी जावास्क्रिप्ट एप्लिकेशन बनाना (मूल Addy उस्मानी, अनुवाद trurl123 )