Backbone.js 1.4

Backbone.js




backbone

Backbone.Events

घटनाक्रम एक मॉड्यूल है जिसे ऑब्जेक्ट को किसी भी ऑब्जेक्ट में मिलाया जा सकता है, जिसमें वस्तु को बाँटने की क्षमता और कस्टम नामांकित ईवेंट ट्रिगर करने की क्षमता है। घटनाओं को बंधे होने से पहले घोषित करने की ज़रूरत नहीं है, और पारित तर्क ले सकते हैं। उदाहरण के लिए:

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

उदाहरण के लिए, एक आसान इवेंट डिस्पैचर बनाने के लिए जो आपके एप्लिकेशन के विभिन्न क्षेत्रों में ईवेंट समन्वयित कर सकते हैं: var dispatcher = _.clone(Backbone.Events)

object.on(event, callback, [context]) पर object.on(event, callback, [context]) उपनाम: बाँध
किसी ऑब्जेक्ट में एक कॉलबैक फ़ंक्शन बाँधेंईवेंट को निकाल दिए जाने पर कॉलबैक लागू किया जाएगा। यदि आपके पास किसी पृष्ठ पर कई भिन्न घटनाएं हैं, तो सम्मेलन को नामों के नाम पर कॉलन का उपयोग करना है: "poll:start" , या "change:selection" । घटना स्ट्रिंग भी कई घटनाओं की एक अंतरिक्ष-सीमांकित सूची हो सकती है ...

book.on("change:title change:author", ...);

विशेष "all" घटना के लिए बंधे कॉलबैक ट्रिगर हो जाएंगे, जब कोई घटना होती है, और घटना का नाम पहले तर्क के रूप में पारित किया जाएगा। उदाहरण के लिए, सभी घटनाओं को एक ऑब्जेक्ट से दूसरी प्रॉक्सी करने के लिए:

proxy.on("all", function(eventName) {
  object.trigger(eventName);
});

सभी बैकबोन इवेंट विधियां स्थितिगत तर्कों के विकल्प के रूप में, एक ईवेंट नक्शा वाक्यविन्यास का भी समर्थन करती हैं:

book.on({
  "change:author": authorPane.update,
  "change:title change:subtitle": titleView.update,
  "destroy": bookView.remove
});

कॉलबैक लागू होने पर इसके लिए एक संदर्भ मान की आपूर्ति करने के लिए, वैकल्पिक अंतिम तर्क: model.on('change', this.render, this) या model.on({change: this.render}, this)

ऑफ object.off([event], [callback], [context]) उपनाम: अनबंड
एक ऑब्जेक्ट से पहले-बद्ध कॉलबैक फ़ंक्शन निकालें। अगर कोई संदर्भ निर्दिष्ट नहीं किया गया है, तो विभिन्न संदर्भों के साथ कॉलबैक के सभी संस्करणों को हटा दिया जाएगा। यदि कोई कॉलबैक निर्दिष्ट नहीं किया गया है, तो ईवेंट के लिए सभी कॉलबैक निकाल दिए जाएंगे। अगर कोई ईवेंट निर्दिष्ट नहीं किया गया है, तो सभी ईवेंट के लिए कॉलबैक निकाल दिए जाएंगे।

// Removes just the `onChange` callback.
object.off("change", onChange);

// Removes all "change" callbacks.
object.off("change");

// Removes the `onChange` callback for all events.
object.off(null, onChange);

// Removes all callbacks for `context` for all events.
object.off(null, null, context);

// Removes all callbacks on `object`.
object.off();

ध्यान दें कि model.off() कॉलिंग, उदाहरण के लिए, वास्तव में मॉडल पर सभी घटनाओं को निकाल देगा - जिसमें आंतरिक बहीखाता पद्धति के लिए बैकबोन का उपयोग होता है

ट्रिगर object.trigger(event, [*args])
ईवेंट के लिए ट्रिगर कॉलबैक, या घटनाओं की अंतरिक्ष-सीमांकित सूची। ट्रिगर करने के बाद के तर्कों को ईवेंट कॉलबैक के साथ पारित किया जाएगा।

एक बार object.once(event, callback, [context])
बस की तरह, लेकिन निकाले जाने से पहले केवल एक बार आग लगने के लिए कॉलबैक का कारण बनता है। "अगली बार जब एक्स होता है, ऐसा करो" कहने के लिए काम करो। जब एक से अधिक घटनाएं अलग-अलग सिंटैक्स का उपयोग करते हुए पारित हो जाती हैं, तो ईवेंट हर बार आपके द्वारा पारित होने वाली प्रत्येक घटना के लिए आग लगाएगा, एक बार सभी घटनाओं के संयोजन के लिए नहीं

listenTo object.listenTo(other, event, callback)
एक वस्तु को किसी अन्य वस्तु पर किसी विशेष घटना को सुनने के लिए कहें। इस प्रपत्र का उपयोग other.on(event, callback, object) बदले, यह है कि listenTo ऑब्जेक्ट को घटनाओं का ट्रैक रखने की अनुमति देता है, और उन्हें एक बार बाद में हटाया जा सकता है। कॉलबैक हमेशा ऑब्जेक्ट को संदर्भ के रूप में बुलाया जाएगा।

view.listenTo(model, 'change', view.render);

stopListening object.stopListening([other], [event], [callback])
घटनाओं को सुनना बंद करने के लिए किसी वस्तु को बताएं या तो कॉल रोकने के लिए कोई बहस नहीं करने के लिए ऑब्जेक्ट को अपने सभी registered कॉलबैक निकाल दें ... या किसी विशेष ऑब्जेक्ट, या एक विशिष्ट ईवेंट या सिर्फ एक विशिष्ट कॉलबैक पर सुन रही घटनाओं को हटाने के लिए कहकर इसे और अधिक सटीक बनाएं

view.stopListening();

view.stopListening(model);

listenToOnce object.listenToOnce(other, event, callback)
बस registered तरह, लेकिन निकाले जाने से पहले केवल एक बार आग लगने के लिए कॉलबैक का कारण बनता है।

घटनाक्रम की सूची
तर्कसंगतता के साथ बैकबोन की अंतर्निहित घटनाओं की पूरी सूची यहां दी गई है। आप मॉडल, संग्रह और दृश्यों पर अपनी स्वयं की घटनाओं को ट्रिगर करने के लिए भी स्वतंत्र हैं जैसे आप फिट दिखते हैं। Backbone ऑब्जेक्ट ही Events में घोला जा सकता है, और उन सभी वैश्विक इवेंट्स का उपयोग करने के लिए उपयोग किया जा सकता है जो आपकी एप्लिकेशन की जरूरत है।

  • "जोड़ें" (मॉडल, संग्रह, विकल्प) - जब कोई मॉडल संग्रह में जोड़ा जाता है
  • "निकालें" (मॉडल, संग्रह, विकल्प) - जब कोई मॉडल संग्रह से हटा दिया जाता है।
  • "अपडेट" (संग्रह, ऑप्शंस) - एक संग्रह से किसी भी संख्या में जोड़े गए या हटा दिए जाने के बाद एकल ईवेंट ट्रिगर किया गया है।
  • "रीसेट" (संग्रह, विकल्प) - जब संग्रह की पूरी सामग्री reset हो गई है
  • "सॉर्ट" (संग्रह, ऑप्शंस) - जब संग्रह फिर से सॉर्ट किया गया है।
  • "परिवर्तन" (मॉडल, विकल्प) - जब एक मॉडल की विशेषताओं को बदल दिया गया है
  • "परिवर्तन: [विशेषता]" (मॉडल, मान, विकल्प) - जब एक विशिष्ट विशेषता को अपडेट किया गया है।
  • "नष्ट" (मॉडल, संग्रह, विकल्प) - जब एक मॉडल destroyed जाता है
  • "अनुरोध" (model_or_collection, xhr, विकल्प) - जब कोई मॉडल या संग्रह सर्वर के लिए अनुरोध शुरू कर दिया है।
  • "समन्वयन" (model_or_collection, प्रतिक्रिया, विकल्प) - जब कोई मॉडल या संग्रह सफलतापूर्वक सर्वर से समन्वयित हो गया है
  • "त्रुटि" (model_or_collection, प्रतिक्रिया, विकल्प) - जब कोई मॉडल या संग्रह सर्वर का अनुरोध विफल हो गया है।
  • "अमान्य" (मॉडल, त्रुटि, विकल्प) - जब किसी मॉडल की validation क्लाइंट पर विफल हो जाती है
  • "मार्ग: [नाम]" (पैरामीटर) - किसी विशिष्ट मार्ग का मिलान होने पर राउटर द्वारा निकाल दिया गया।
  • "मार्ग" (मार्ग, पैरामीटर) - किसी भी मार्ग का मिलान होने पर रूटर द्वारा निकाल दिया गया।
  • "मार्ग" (रूटर, मार्ग, पैरामीटर) - किसी भी मार्ग का मिलान होने पर इतिहास द्वारा निकाल दिया गया
  • "सभी" - यह विशेष ईवेंट किसी ट्रिगर घटना के लिए आग लगाता है, ईवेंट के नाम को पहले तर्क के रूप में सभी ट्रिगर तर्कों के बाद से गुजरता है।

आम तौर पर बोलते हुए, किसी समारोह को कॉल करते समय एक घटना ( model.set , model.set , और इतने पर ...) को कॉल करते हैं, यदि आप घटना को ट्रिगर होने से रोकना चाहते हैं, तो आप {silent: true} को पारित कर सकते हैं एक विकल्प। ध्यान दें कि यह शायद ही कभी शायद , कभी भी नहीं, एक अच्छा विचार है अपने इवेंट कॉलबैक के विकल्पों में एक विशिष्ट ध्वज के माध्यम से देखने के लिए, और अनदेखा करना चुनना, आमतौर पर बेहतर तरीके से काम करेगा

Backbone.Model

मॉडल किसी भी जावास्क्रिप्ट एप्लिकेशन का दिल है, जिसमें इंटरेक्टिव डेटा शामिल होता है और इसके आस-पास के तर्क का एक बड़ा हिस्सा होता है: रूपांतरण, सत्यापन, गणना गुण, और अभिगम नियंत्रण। आप अपने डोमेन-विशिष्ट विधियों के साथ बैकबोन.मॉडेल का विस्तार करते हैं, और मॉडल परिवर्तनों के प्रबंधन के लिए कार्यशीलता का मूलभूत सेट प्रदान करता है।

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

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

विस्तार का विस्तार करें। Backbone.Model.extend(properties, [classProperties])
अपनी खुद की एक मॉडल वर्ग बनाने के लिए, आप backbone.Model का विस्तार करते हैं और उदाहरण गुण प्रदान करते हैं , साथ ही साथ वैकल्पिक क्लासप्रॉपर्टीज सीधे कन्स्ट्रक्टर फ़ंक्शन पर संलग्न होते हैं।

विस्तार से प्रोटोटाइप श्रृंखला निर्धारित करता है, इसलिए विस्तार के साथ बनाया गया उपवर्गों को और अधिक बढ़ाया जा सकता है और जितनी चाहें उतनी उप-वर्गीकृत किया जा सकता है।

var Note = Backbone.Model.extend({

  initialize: function() { ... },

  author: function() { ... },

  coordinates: function() { ... },

  allowedToEdit: function(account) {
    return true;
  }

});

var PrivateNote = Note.extend({

  allowedToEdit: function(account) {
    return account.owns(this);
  }

});

super पर संक्षेप एक तरफ: जावास्क्रिप्ट सुपर कॉल करने के लिए एक आसान तरीका प्रदान नहीं करता है - प्रोटोटाइप श्रृंखला पर उच्च परिभाषित समान नाम का फ़ंक्शन। यदि आप set , या save जैसे मूल फ़ंक्शन को ओवरराइड करते हैं, और आप मूल ऑब्जेक्ट के कार्यान्वयन को लागू करना चाहते हैं, तो आपको इन पंक्तियों के साथ स्पष्ट रूप से कॉल करना होगा:

var Note = Backbone.Model.extend({
  set: function(attributes, options) {
    Backbone.Model.prototype.set.apply(this, arguments);
    ...
  }
});

कन्स्ट्रक्टर / new Model([attributes], [options]) इनिशियलाइज़ करना new Model([attributes], [options])
जब एक मॉडल का एक उदाहरण बनाते हैं, तो आप गुणों के शुरुआती मूल्यों में प्रवेश कर सकते हैं, जो कि मॉडल पर set किया जाएगा। यदि आप एक प्रारंभिक फ़ंक्शन परिभाषित करते हैं, तो मॉडल बनने पर इसे लागू किया जाएगा।

new Book({
  title: "One Thousand and One Nights",
  author: "Scheherazade"
});

दुर्लभ मामलों में, यदि आप कल्पना करने के लिए देख रहे हैं, तो आप कन्स्ट्रक्टर ओवरराइड करना चाह सकते हैं, जिससे आप अपने मॉडल के लिए वास्तविक कंस्ट्रक्टर फ़ंक्शन को बदल सकते हैं।

var Library = Backbone.Model.extend({
  constructor: function() {
    this.books = new Books();
    Backbone.Model.apply(this, arguments);
  },
  parse: function(data, options) {
    this.books.reset(data.books);
    return data.library;
  }
});

यदि आप {collection: ...} को विकल्प के रूप में पास करते हैं , तो मॉडल को एक collection संपत्ति मिलती है जिसका उपयोग मॉडल का संग्रह करने के लिए किया जाता है, और यह मॉडल के url की गणना करने में मदद के लिए किया जाता है। मॉडल model.collection संपत्ति सामान्य रूप से स्वचालित रूप से बनाई जाती है जब आप पहली बार एक संग्रह को एक मॉडल जोड़ते हैं। ध्यान दें कि रिवर्स सही नहीं है, कन्स्ट्रक्टर को इस विकल्प को पास करने के रूप में संग्रह को स्वचालित रूप से नहीं जोड़ा जाएगा। उपयोगी, कभी-कभी

यदि {parse: true} को एक विकल्प के रूप में पारित किया जाता है , तो मॉडल को set जाने से पहले विशेषताओं को parse द्वारा पहले परिवर्तित किया जाएगा।

model.get(attribute) प्राप्त model.get(attribute)
मॉडल से एक विशेषता का वर्तमान मूल्य प्राप्त करें उदाहरण के लिए: note.get("title")

सेट model.set(attributes, [options])
मॉडल पर विशेषताओं (एक या कई) के एक हैश सेट करें यदि कोई भी विशेषता मॉडल की स्थिति को बदलती है, तो मॉडल पर "change" ईवेंट चालू हो जाएगा। विशिष्ट विशेषताओं के लिए ईवेंट बदलें भी ट्रिगर किए गए हैं, और आप उन लोगों के साथ भी बाध्य कर सकते हैं, उदाहरण के लिए: change:title , और change:content आप व्यक्तिगत कुंजी और मूल्य भी पास कर सकते हैं।

note.set({title: "March 20", content: "In his eyes she eclipses..."});

book.set("title", "A Scandal in Bohemia");

model.escape(attribute)
get करने के get समान है, लेकिन किसी मॉडल के विशेषता के HTML-escaped संस्करण को रिटर्न करता है। यदि आप मॉडल से एचटीएमएल में डेटा को इकट्ठा कर रहे हैं, एट्रिब्यूट्स को पुनः प्राप्त करने के लिए एस्केप का इस्तेमाल करते हुए XSS हमलों को रोका जा सकेगा

var hacker = new Backbone.Model({
  name: "<script>alert('xss')</script>"
});

alert(hacker.escape('name'));

model.has(attribute)
यदि true को गैर-रिक्त या गैर-अपरिभाषित मान पर सेट किया गया है, तो true वापस लौटाता true

if (note.has("title")) {
  ...
}

अनसेट सेट model.unset(attribute, [options]) अनसेट model.unset(attribute, [options])
एक विशेषता को इसे आंतरिक विशेषताओं हैश से हटाकर निकालें। एक "change" ईवेंट को सक्रिय करता है जब तक कि silent एक विकल्प के रूप में पारित नहीं किया जाता है

स्पष्ट model.clear([options]) स्पष्ट model.clear([options])
id विशेषता सहित मॉडल से सभी विशेषताओं को निकालता है। एक "change" ईवेंट को सक्रिय करता है जब तक कि silent एक विकल्प के रूप में पारित नहीं किया जाता है

आईडी model.id
मॉडल की विशेष संपत्ति, आईडी एक मनमाना स्ट्रिंग है (पूर्णांक आईडी या यूयूआईडी)। यदि आप एट्रिब्यूट्स हैश में आईडी सेट करते हैं, तो उसे सीधे प्रॉपर्टी के रूप में मॉडल पर कॉपी किया जाएगा। मॉडल संग्रह से आईडी द्वारा पुनः प्राप्त किया जा सकता है, और आईडी डिफ़ॉल्ट रूप से मॉडल यूआरएल जेनरेट करने के लिए उपयोग किया जाता है।

आईडी model.idAttribute
एक मॉडल की अद्वितीय पहचानकर्ता id विशेषता के तहत संग्रहीत है। यदि आप किसी बैकएंड (सीचडीबी, मोंगोडीबी) से सीधे संपर्क कर रहे हैं जो कि एक अलग अनूठी कुंजी का उपयोग करता है, तो आप उस कुंजी से id को पारदर्शी रूप से मानचित्रित करने के लिए मॉडल का idAttribute सेट कर सकते हैं।

var Meal = Backbone.Model.extend({
  idAttribute: "_id"
});

var cake = new Meal({ _id: 1, name: "Cake" });
alert("Cake id: " + cake.id);

cid model.cid
मॉडल की विशेष संपत्ति, सीआईडी या क्लाइंट आईडी एक अद्वितीय पहचानकर्ता है, जो स्वचालित रूप से सभी मॉडलों को सौंपी जाती हैं, जब वे पहली बार बनाए जाते हैं। क्लाइंट आईडी कामयाब होते हैं जब मॉडल अभी तक सर्वर पर सहेजा नहीं गया है, और अभी तक इसके अंतिम आईडी नहीं है , लेकिन पहले से ही UI में दिखाई देने की आवश्यकता है।

विशेषताएँ model.attributes विशेषताएँ
विशेषताओं की संपत्ति आंतरिक हैश है जिसमें मॉडल की स्थिति होती है - आमतौर पर (लेकिन जरूरी नहीं) सर्वर पर मॉडल डेटा का प्रतिनिधित्व करते हुए JSON ऑब्जेक्ट का एक रूप। यह अक्सर डेटाबेस से एक पंक्ति के सीधी सीरियलाइजेशन होता है, लेकिन यह क्लाइंट-साइड की गणना वाली स्थिति भी हो सकती है।

कृपया उन्हें सीधे संशोधित करने के बजाय विशेषताओं को अपडेट करने के लिए set का उपयोग करें यदि आप मॉडल की विशेषताओं की एक प्रति पुनः प्राप्त और _.clone(model.attributes) करना _.clone(model.attributes) , तो इसके बजाय _.clone(model.attributes) उपयोग करें।

इस तथ्य के कारण कि Events घटनाओं की अलग-अलग सूचियों को स्वीकार करता है, विशेषता नामों में रिक्त स्थान शामिल नहीं होना चाहिए

बदल दिया model.changed
बदली हुई संपत्ति आंतरिक हैश है जिसमें सभी विशेषताओं को शामिल किया गया है जो कि इसके अंतिम set बाद से बदल गए हैं। अपने राज्य को आंतरिक रूप से set द्वारा बनाए रखा गया है, इसलिए कृपया सीधे बदला नहीं अपडेट करें बदले की एक प्रतिलिपि बदल से प्राप्त की जा सकती changedAttributes

डिफ़ॉल्ट model.defaults or model.defaults()
आपके मॉडल के लिए डिफ़ॉल्ट विशेषताओं को निर्दिष्ट करने के लिए डिफ़ॉल्ट हैश (या फ़ंक्शन) का उपयोग किया जा सकता है मॉडल का एक उदाहरण बनाते समय, किसी भी अनिर्दिष्ट विशेषताओं को उनके डिफ़ॉल्ट मान पर सेट किया जाएगा।

var Meal = Backbone.Model.extend({
  defaults: {
    "appetizer":  "caesar salad",
    "entree":     "ravioli",
    "dessert":    "cheesecake"
  }
});

alert("Dessert will be " + (new Meal).get('dessert'));

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

toJSON मॉडल. model.toJSON([options])
JSON स्ट्रैटिंग के लिए मॉडल की attributes की उथले प्रतिलिपि वापस करें। इसे सर्वर पर भेजे जाने से पहले दृढ़ता, सीरियलाइज़ेशन या संवर्धन के लिए इस्तेमाल किया जा सकता है। इस विधि का नाम थोड़ा भ्रमित है, क्योंकि यह वास्तव में एक JSON स्ट्रिंग नहीं लौटाता है - लेकिन मुझे डर है कि यह ऐसा तरीका है कि JSON.stringify के लिए JavaScript API काम करता है।

var artist = new Backbone.Model({
  firstName: "Wassily",
  lastName: "Kandinsky"
});

artist.set({birthday: "December 16, 1866"});

alert(JSON.stringify(artist));

सिंक model.sync(method, model, [options]) sync model.sync(method, model, [options])
सर्वर पर एक मॉडल की स्थिति को जारी रखने के लिए Backbone.sync का उपयोग करता है। कस्टम व्यवहार के लिए ओवरराइड किया जा सकता है

फ़ेच model.fetch([options])
Backbone.sync को प्रतिनिधि द्वारा सर्वर से प्राप्त विशेषताओं के साथ मॉडल की स्थिति में विलय करता है। एक jqXHR देता है अगर मॉडल को डेटा के साथ कभी भी पॉपुलेटेड नहीं किया गया है, या यदि आप यह सुनिश्चित करना चाहते हैं कि आपके पास नवीनतम सर्वर स्थिति है एक "change" घटना ट्रिगर करता है यदि सर्वर का राज्य मौजूदा विशेषताओं से अलग है fetch ऑप्शंस हैश में success और error कॉलबैक स्वीकार करता है, जो दोनों तर्क (model, response, options) पारित किए जाते हैं।

// Poll every 10 seconds to keep the channel model up-to-date.
setInterval(function() {
  channel.fetch();
}, 10000);

model.save([attributes], [options]) सेव सहेजें model.save([attributes], [options])
Backbone.sync . Backbone.sync को सौंपे हुए अपने डेटाबेस (या वैकल्पिक दृढ़ता परत) को एक मॉडल सहेजें वैधता सफल और false अन्यथा यदि एक jqXHR देता है विशेषताओं हैश ( set ) में वे विशेषताओं को शामिल करना चाहिए जिन्हें आप बदलना चाहते हैं - जो कि उल्लेख नहीं की गई हैं उन्हें बदला नहीं जाएगा - लेकिन, संसाधन का एक पूर्ण प्रतिनिधित्व सर्वर पर भेजा जाएगा। set साथ, आप एक हैश के बजाय व्यक्तिगत कुंजी और मान पास कर सकते हैं यदि मॉडल में एक validation विधि है, और सत्यापन विफल रहता है, तो मॉडल सहेजा नहीं जाएगा। यदि मॉडल isNew , तो सहेज एक "create" (HTTP POST ) होगा, यदि मॉडल पहले से ही सर्वर पर मौजूद है, तो सहेज एक "update" (HTTP PUT ) होगा।

यदि इसके बदले, आप केवल परिवर्तित विशेषताओं को सर्वर पर भेजना चाहते हैं, कॉल model.save(attrs, {patch: true}) कॉल करें। आपको केवल पास किए गए विशेषताओं के साथ सर्वर को एक HTTP PATCH अनुरोध प्राप्त होगा।

नए गुणों को save से कॉलिंग तुरंत एक "change" घटना का कारण होगा, एक "request" घटना के रूप में अजाक्स अनुरोध सर्वर पर जाना शुरू होता है, और सर्वर ने सफल परिवर्तन स्वीकार किए जाने के बाद एक "sync" यदि आप मॉडल पर नए विशेषताओं को सेट करने से पहले सर्वर की प्रतीक्षा करना चाहते हैं, तो {wait: true} पास {wait: true}

निम्न उदाहरण में देखें कि पिछली बार के Backbone.sync . Backbone.sync हमारे अधिरोपित संस्करण को "create" अनुरोध पहली बार मॉडल सहेजा गया है और दूसरी बार एक "update" अनुरोध प्राप्त करता है।

Backbone.sync = function(method, model) {
  alert(method + ": " + JSON.stringify(model));
  model.set('id', 1);
};

var book = new Backbone.Model({
  title: "The Rough Riders",
  author: "Theodore Roosevelt"
});

book.save();

book.save({author: "Teddy"});

सहेजें विकल्प हैश में success और error कॉलबैक स्वीकार करता है, जो तर्क (model, response, options) पारित किया जाएगा। यदि एक सर्वर-साइड सत्यापन विफल हो जाता है, तो एक गैर 200 HTTP प्रतिक्रिया कोड, पाठ या JSON में एक त्रुटि प्रतिक्रिया के साथ वापस आइए।

book.save("author", "F.D.R.", {error: function(){ ... }});

model.destroy([options]) को नष्ट model.destroy([options])
Backbone.sync लिए एक HTTP DELETE अनुरोध को सौंपने के द्वारा सर्वर पर मॉडल को नष्ट कर देता है। मॉडल है एक jqXHR ऑब्जेक्ट, या false अगर isNew विकल्प हैश में success और error कॉलबैक स्वीकार करता है, जो पारित किया जाएगा (model, response, options) । मॉडल पर एक "destroy" घटना "destroy" ट्रिगर करता है, जो किसी भी संग्रह के माध्यम से बुलबुलाएगा, जिसमें "request" ईवेंट होता है क्योंकि यह सर्वर को अजाक्स अनुरोध शुरू करता है, और एक "sync" ईवेंट, सर्वर सफलतापूर्वक स्वीकार किए जाने के बाद मॉडल का विलोपन पास {wait: true} अगर आप संकुल से मॉडल को हटाने से पहले सर्वर से जवाब देने के लिए इंतजार करना चाहते हैं, तो पास करें।

book.destroy({success: function(model, response) {
  ...
}});

अंडरस्कोर मेथड्स (9)
Backbone.Model पर 9 ऑब्जेक्ट फ़ंक्शन प्रदान करने के लिए Underscore.js के बैकबोन प्रॉक्सी। वे सभी यहां दर्ज़ नहीं किए गए हैं, लेकिन आप पूर्ण विवरण के लिए अंडर्सकोर दस्तावेज़ीकरण पर एक नज़र डाल सकते हैं ...

user.pick('first_name', 'last_name', 'email');

chapters.keys().join(', ');

model.validate(attributes, options) मान्य करें। model.validate(attributes, options)
इस पद्धति को अपरिभाषित छोड़ दिया गया है और आपको इसे किसी भी कस्टम सत्यापन तर्क के साथ ओवरराइड करने के लिए प्रोत्साहित किया जाता है जो कि जावास्क्रिप्ट में किया जा सकता है डिफ़ॉल्ट रूप से किसी भी विशेषताओं को सेट करने से पहले जांच को मान्य करें लेकिन आप एक विकल्प के रूप में {validate: true} को पास करके नए विशेषताओं को मान्य set लिए set भी बता सकते हैं।
मान्य विधि को मॉडल विशेषताओं के साथ-साथ set या save लिए पास set गए किसी विकल्प को प्राप्त होता है। यदि गुण वैध हैं, तो मान्य से कुछ भी वापस मत लौटें; यदि वे अमान्य हैं, तो आपके चयन का कोई त्रुटि लौटाएं यह प्रदर्शित करने के लिए एक स्ट्रिंग त्रुटि संदेश के रूप में उतना ही आसान हो सकता है, या एक पूर्ण त्रुटि ऑब्जेक्ट जो प्रोग्राम को प्रोग्रामिंग की त्रुटि का वर्णन करता है। अगर मान्य को एक त्रुटि देता है, तो save नहीं रहेगा, और मॉडल विशेषताओं को सर्वर पर संशोधित नहीं किया जाएगा। विफल मान्यताओं ने "invalid" ईवेंट ट्रिगर किया, और इस विधि द्वारा दिए गए मान के साथ मॉडल पर validationError प्रॉपर्टी सेट कर दी।

var Chapter = Backbone.Model.extend({
  validate: function(attrs, options) {
    if (attrs.end < attrs.start) {
      return "can't end before it starts";
    }
  }
});

var one = new Chapter({
  title : "Chapter One: The Beginning"
});

one.on("invalid", function(model, error) {
  alert(model.get("title") + " " + error);
});

one.save({
  start: 15,
  end:   10
});

"invalid" घटना मॉडल या संग्रहण स्तर पर मोटे अनाज वाले त्रुटि संदेशों को उपलब्ध कराने के लिए उपयोगी हैं।

मान्यकरण model.validationError वैधता model.validationError
अंतिम विफल सत्यापन के दौरान validation किए गए मान।

isValid model.isValid()
मॉडल राज्य को देखने के लिए validation चलाएं।

var Chapter = Backbone.Model.extend({
  validate: function(attrs, options) {
    if (attrs.end < attrs.start) {
      return "can't end before it starts";
    }
  }
});

var one = new Chapter({
  title : "Chapter One: The Beginning"
});

one.set({
  start: 15,
  end:   10
});

if (!one.isValid()) {
  alert(one.get("title") + " " + one.validationError);
}

url model.url()
उस रिश्तेदार यूआरएल को रिटर्न करता है जहां मॉडल के संसाधन सर्वर पर स्थित होंगे। यदि आपके मॉडल कहीं और स्थित हैं, तो इस विधि को सही तर्क के साथ ओवरराइड करें। फ़ॉर्म के यूआरएल उत्पन्न करता है: डिफ़ॉल्ट रूप से "[collection.url]/[id]" उत्पन्न करता है, लेकिन आप स्पष्ट urlRoot निर्दिष्ट करके ओवरराइड कर सकते हैं अगर मॉडल का संग्रह खाते में नहीं लिया जाना चाहिए।

Collection#url जनरेट करने के लिए Collection#url प्रतिनिधियों, इसलिए सुनिश्चित करें कि आपने इसे परिभाषित किया है, या urlRoot संपत्ति, अगर इस वर्ग के सभी मॉडल साझा रूट यूआरएल साझा करते हैं "आईडी "/documents/7/notes" url के साथ एक Backbone.Collection में संग्रहित 101 आईडी वाला एक मॉडल, इस यूआरएल को होगा: "/documents/7/notes/101"

urlRoot model.urlRoot or model.urlRoot()
urlRoot निर्दिष्ट करें यदि आप मॉडल आईडी पर आधारित यूआरएल जेनरेट करने के लिए डिफ़ॉल्ट url फ़ंक्शन को सक्षम करने के लिए, किसी संग्रह के बाहर मॉडल का उपयोग कर रहे हैं। "[urlRoot]/id"
आम तौर पर, आपको इसे परिभाषित करने की आवश्यकता नहीं होगी। ध्यान दें कि urlRoot भी एक फ़ंक्शन हो सकता है।

var Book = Backbone.Model.extend({urlRoot : '/books'});

var solaris = new Book({id: "1083-lem-solaris"});

alert(solaris.url());

पार्स model.parse(response, options) पार्स model.parse(response, options)
पार्स को तब भी कहा जाता है जब किसी भी मॉडल का डेटा सर्वर द्वारा वापस fetch , fetch , और save । फ़ंक्शन को कच्चा response ऑब्जेक्ट पारित किया गया है, और मॉडल पर एट्रिब्यूट हैश set करना चाहिए। डिफ़ॉल्ट क्रियान्वयन एक नो-ऑप है, बस JSON प्रतिक्रिया से गुजर रहा है। यदि आपको पहले से मौजूद एपीआई के साथ काम करने की ज़रूरत हो, या अपने जवाबों को बेहतर बनाने के लिए इसे ओवरराइड करें।

यदि आप 3.1 से पहले संस्करण वाले रेल बैकएंड के साथ काम कर रहे हैं, तो आप देखेंगे कि इसकी डिफ़ॉल्ट to_json कार्यान्वयन में एक नेमस्पेस के अंतर्गत मॉडल के गुण शामिल हैं। सीमलेस बैकबोन एकीकरण के लिए इस व्यवहार को अक्षम करने के लिए, सेट करें:

ActiveRecord::Base.include_root_in_json = false

क्लोन model.clone()
समान विशेषताओं के साथ मॉडल का एक नया उदाहरण देता है

नया मॉडल है। model.isNew()
क्या इस मॉडल को अभी तक सर्वर पर सहेजा गया है? अगर मॉडल में अभी तक कोई id , तो उसे नया माना जाता है

बदल गया मॉडल है। model.hasChanged([attribute])
अपने अंतिम set बाद से मॉडल बदल गया है? अगर कोई विशेषता पारित हो जाती है, तो वह true वापस आ जाता true यदि यह विशिष्ट विशेषता बदल गई है।

ध्यान दें कि यह विधि, और निम्नलिखित परिवर्तन-संबंधित लोगों, केवल "change" घटना के दौरान उपयोगी हैं

book.on("change", function() {
  if (book.hasChanged("title")) {
    ...
  }
});

बदल model.changedAttributes([attributes]) गया model.changedAttributes([attributes])
केवल मॉडल के गुणों का एक हैश पुनर्प्राप्त करें, जो पिछले set बाद से बदल गए हैं, या कोई भी नहीं है तो false वैकल्पिक रूप से, एक बाह्य विशेषताओं हैश पारित किया जा सकता है, मॉडल से भिन्न हैश में विशेषताएँ लौट रहा है। यह पता लगाने के लिए इस्तेमाल किया जा सकता है कि किस दृश्य का अपडेट किया जाना चाहिए, या सर्वर पर हुए बदलावों को समन्वयित करने के लिए क्या कॉल की आवश्यकता है।

पिछला model.previous(attribute)
"change" ईवेंट के दौरान, इस पद्धति का उपयोग किसी परिवर्तित विशेषता के पिछले मान को प्राप्त करने के लिए किया जा सकता है।

var bill = new Backbone.Model({
  name: "Bill Smith"
});

bill.on("change:name", function(model, name) {
  alert("Changed name from " + bill.previous("name") + " to " + name);
});

bill.set({name : "Bill Jones"});

पिछला model.previousAttributes() पूर्व model.previousAttributes()
मॉडल के पिछले विशेषताओं की एक प्रति लौटें किसी मॉडल के संस्करणों के बीच अंतर प्राप्त करने के लिए उपयोगी या त्रुटि के बाद वैध स्थिति में वापस आना उपयोगी है।

Backbone.Collection

संग्रह मॉडल के सेट का आदेश दिया जाता है जब संग्रह में कोई मॉडल संशोधित किया गया है, "add" और "remove" घटनाओं के लिए सुनो, सर्वर से संग्रह प्राप्त करने के लिए, और अंडर्सकोर.जेएस विधियों का पूरा सूट का उपयोग करने पर आप "change" ईवेंट को बाँध सकते हैं।

किसी भी घटना को संग्रह में किसी मॉडल पर ट्रिगर किया जाता है, सुविधा के लिए सीधे संग्रह पर ट्रिगर किया जाएगा। यह आपको संग्रह में किसी भी मॉडल में विशिष्ट विशेषताओं में परिवर्तन के लिए सुनने की अनुमति देता है, उदाहरण के लिए: documents.on("change:selected", ...)

Backbone.Collection.extend(properties, [classProperties]) विस्तार करें। Backbone.Collection.extend(properties, [classProperties])
अपनी खुद की एक संग्रह वर्ग बनाने के लिए, बैकबोन का विस्तार करें। संकलन , उदाहरण के गुण प्रदान करने के साथ-साथ वैकल्पिक क्लासप्रॉपर्टीज़ को संग्रह के कन्स्ट्रक्टर फ़ंक्शन पर सीधे संलग्न करना।

मॉडल collection.model([attrs], [options]) मॉडल collection.model([attrs], [options])
संग्रह श्रेणी को निर्दिष्ट करने के लिए इस संपत्ति को ओवरराइड करें। यदि परिभाषित किया जाता है, तो आप add , create और reset करने के add कच्चे विशेषताओं ऑब्जेक्ट्स (और एरेज़) को पारित कर सकते create , और विशेषताओं को उचित प्रकार के मॉडल में रूपांतरित कर दिया जाएगा।

var Library = Backbone.Collection.extend({
  model: Book
});

एक संग्रह में एक गुणक को रिटर्न करने वाले कन्स्ट्रक्टर के साथ इस संपत्ति को ओवरराइड करके बहुरूपक मॉडल भी हो सकते हैं।

var Library = Backbone.Collection.extend({

  model: function(attrs, options) {
    if (condition) {
      return new PublicDocument(attrs, options);
    } else {
      return new PrivateDocument(attrs, options);
    }
  }

});

मॉडल आईडी collection.modelId(attrs) मॉडल एडी collection.modelId(attrs) एटर्स collection.modelId(attrs)
इस पद्धति को वापस लाने के लिए इस पद्धति को ओवरराइड करें ताकि संग्रह को उसके गुणों के अनुसार दिया गया मॉडल पहचान सके। एकल संग्रह में विभिन्न idAttribute गुणों के साथ कई तालिकाओं के मॉडलों के संयोजन के लिए उपयोगी।

मूलभूत रूप से गुणों के idAttribute का संग्रह संग्रह के मॉडल वर्ग से देता है या विफल होने पर, id यदि आपका संग्रह किसी मॉडल फ़ैक्टरी का उपयोग करता है और उन मॉडलों में id अलावा एक idAttribute तो आपको इस विधि को ओवरराइड करना होगा।

var Library = Backbone.Collection.extend({
  modelId: function(attrs) {
    return attrs.type + attrs.id;
  }
});

var library = new Library([
  {type: 'dvd', id: 1},
  {type: 'vhs', id: 1}
]);

var dvdId = library.get('dvd1').id;
var vhsId = library.get('vhs1').id;
alert('dvd: ' + dvdId + ', vhs: ' + vhsId);

कन्स्ट्रक्टर / new Backbone.Collection([models], [options]) प्रारंभ करना। चयन new Backbone.Collection([models], [options])
जब कोई संग्रह बनाते हैं, तो आप मॉडलों की प्रारंभिक सरणी में पास करना चुन सकते हैं। संग्रह के comparator को एक विकल्प के रूप में शामिल किया जा सकता है तुलनित्र विकल्प के रूप में false पासिंग को छँटाई रोकेगा। यदि आप एक प्रारंभिक फ़ंक्शन को परिभाषित करते हैं, तो संग्रह बनाया जाने पर इसे लागू किया जाएगा। कुछ विकल्प हैं जो, यदि प्रदान किए गए हैं, तो संग्रह से सीधे जुड़े हुए हैं: model और comparator
options साथ रिक्त संग्रह बनाने के लिए models लिए null पास options

var tabs = new TabSet([tab1, tab2, tab3]);
var spaces = new Backbone.Collection(null, {
  model: Space
});

मॉडल collection.models मॉडल
संग्रह के अंदर के मॉडल के जावास्क्रिप्ट सरणी का कच्चा उपयोग। आम तौर पर आप मॉडल ऑब्जेक्ट्स तक पहुंचने के लिए get , at , या अंडर्सकोर विधियों का उपयोग करना चाहते हैं, लेकिन कभी-कभी सरणी का एक सीधा संदर्भ वांछित होता है

toJSON collection.toJSON([options])
संग्रह में प्रत्येक मॉडल की विशेषता हैश ( toJSON ) के माध्यम से एक सरणी लौटें। इसका उपयोग सीरियललाइज करने के लिए किया जा सकता है और पूरे संग्रह को जारी रखने के लिए इस्तेमाल किया जा सकता है। इस विधि का नाम थोड़ा भ्रमित है, क्योंकि यह जावास्क्रिप्ट के JSON API के अनुरूप है।

var collection = new Backbone.Collection([
  {name: "Tim", age: 5},
  {name: "Ida", age: 26},
  {name: "Rob", age: 55}
]);

alert(JSON.stringify(collection));

सिंक collection.sync(method, collection, [options]) sync collection.sync(method, collection, [options])
सर्वर पर संग्रह की स्थिति को जारी रखने के लिए Backbone.sync का उपयोग करता है। कस्टम व्यवहार के लिए ओवरराइड किया जा सकता है

अंडरस्कोर मेथड्स (46)
बैकबोन पर 46 पुनरावृत्ति कार्यों को प्रदान करने के लिए अंडरस्कोर। जेएस के लिए बैकबोन प्रॉक्सी। वे सभी यहां दर्ज़ नहीं किए गए हैं, लेकिन आप पूर्ण विवरण के लिए अंडर्सकोर दस्तावेज़ीकरण पर एक नज़र डाल सकते हैं ...

अधिकांश विधियां मॉडल-एट्रीब्यूट-शैली की भविष्यवाणियों या फ़ंक्शन को समर्थन देने के लिए ऑब्जेक्ट या स्ट्रिंग ले सकती हैं जो तर्क के रूप में मॉडल इंस्टेंस को प्राप्त करता है

books.each(function(book) {
  book.publish();
});

var titles = books.map("title");

var publishedBooks = books.filter({published: true});

var alphabetical = books.sortBy(function(book) {
  return book.author.get("name").toLowerCase();
});

var randomThree = books.sample(3);

collection.add(models, [options]) जोड़ें collection.add(models, [options])
संग्रह के लिए एक मॉडल (या मॉडल की सरणी) "add" , प्रत्येक मॉडल के लिए एक "add" ईवेंट को फ़ायरिंग करें, और बाद में "update" ईवेंट। अगर एक मॉडल संपत्ति परिभाषित की जाती है, तो आप कच्ची विशेषताओं के ऑब्जेक्ट पास कर सकते हैं, और उन्हें मॉडल के उदाहरण के रूप में vivified कर सकते हैं। जोड़े गए (या पहले से मौजूद, यदि डुप्लिकेट) मॉडल लौटाता है निर्दिष्ट index में मॉडल को संकलित करने के लिए {at: index} पास करें। यदि आप संग्रह में पहले से ही संग्रह में मॉडल जोड़ रहे हैं, तो वे अनदेखा कर दिए जाएंगे, जब तक कि आप {merge: true} पास नहीं करते हैं, इस मामले में उनके गुणों को संबंधित मॉडल में विलीन कर दिया जाएगा, किसी उचित "change" आयोजन।

var ships = new Backbone.Collection;

ships.on("add", function(ship) {
  alert("Ahoy " + ship.get("name") + "!");
});

ships.add([
  {name: "Flying Dutchman"},
  {name: "Black Pearl"}
]);

ध्यान दें कि एक ही मॉडल (एक id साथ एक मॉडल) एक संग्रह से अधिक एक बार जोड़ने
एक नो-ऑप है

collection.remove(models, [options]) निकालें। निकालें collection.remove(models, [options])
संग्रह से एक मॉडल (या मॉडल की एक सरणी) निकालें, और उन्हें वापस लौटें प्रत्येक मॉडल एक मॉडल उदाहरण, id स्ट्रिंग या जे एस ऑब्जेक्ट हो सकता है, collection.get के id तर्क के रूप में स्वीकार्य कोई मान। प्रत्येक मॉडल के लिए एक "remove" ईवेंट और बाद में एक एकल "update" ईवेंट को "remove" , जब तक कि {silent: true} पारित नहीं किया जाता है। हटाने के पहले मॉडल का इंडेक्स श्रोताओं को options.index रूप में उपलब्ध है।

रीसेट collection.reset([models], [options]) रीसेट collection.reset([models], [options])
एक बार में मॉडल को जोड़ना और निकालना सभी अच्छी तरह से और अच्छा है, लेकिन कभी-कभी आपके पास इतने सारे मॉडल होते हैं कि आप बड़े पैमाने पर संग्रह को अपडेट करते हैं। मॉडल की एक नई सूची (या विशेषता हैश) के साथ एक संग्रह को बदलने के लिए रीसेट का उपयोग करें, एक एकल "reset" ईवेंट को पूरा करने पर ट्रिगर करता है, और किसी भी मॉडलों पर किसी भी ऐड या इवेंट को हटाए बिना ट्रिगर किए बिना नव-निर्धारित मॉडल वापस लौटाता है सुविधा के लिए, एक "reset" घटना के भीतर, किसी भी पिछले मॉडल की सूची options.previousModels रूप में उपलब्ध है। पूर्व मॉडल options.previousModels
options साथ अपने संग्रह को खाली करने के लिए models लिए null पास options

रेल एप्लीकेशन में प्रारंभिक पृष्ठ लोड के दौरान एक संग्रह को बूटस्ट्रैप पर रीसेट करने के लिए यहां एक उदाहरण दिया गया है:

<script>
  var accounts = new Backbone.Collection;
  accounts.reset(<%= @accounts.to_json %>);
</script>

किसी भी मॉडल को पारित किए बिना collection.reset() कॉलिंग के रूप में तर्क पूरे संग्रह को खाली करेगा।

सेट collection.set(models, [options])
निर्धारित विधि मॉडल की पारित सूची के साथ संग्रह के "स्मार्ट" अद्यतन करता है। यदि सूची में कोई मॉडल संग्रह में अभी तक नहीं है, तो इसे जोड़ा जाएगा; अगर मॉडल पहले से ही संग्रह में है तो उसके गुणों को विलय कर दिया जाएगा; और अगर संग्रह में कोई मॉडल शामिल हैं जो सूची में मौजूद नहीं हैं , तो उन्हें हटा दिया जाएगा उचित "add" , "remove" , और "change" ईवेंट सभी को ऐसा होने पर निकाल दिया जाता है। संग्रह में छुआ मॉडल लौटाता है यदि आप व्यवहार को कस्टमाइज़ करना चाहते हैं, तो आप इसे विकल्प के साथ अक्षम कर सकते हैं: {add: false} , {remove: false} , या {merge: false}

var vanHalen = new Backbone.Collection([eddie, alex, stone, roth]);

vanHalen.set([eddie, alex, stone, hagar]);

// Fires a "remove" event for roth, and an "add" event for "hagar".
// Updates any of stone, alex, and eddie's attributes that may have
// changed over the years.

collection.get(id) प्राप्त करें collection.get(id)
संग्रह से एक मॉडल प्राप्त करें, जिसे id , एक cid , या किसी मॉडल में गुजरने के द्वारा निर्दिष्ट किया गया है।

var book = library.get(110);

collection.at(index)
संग्रह से एक मॉडल प्राप्त करें, सूचकांक द्वारा निर्दिष्ट। यदि आपका संग्रह सॉर्ट किया गया है, और यदि आपका संग्रह सॉर्ट नहीं किया गया है तो उपयोगी है, फिर भी प्रविष्टि क्रम में मॉडल पुनर्प्राप्त करेगा। जब एक नकारात्मक सूचकांक पारित किया जाता है, तो यह संग्रह के पीछे से मॉडल को पुनः प्राप्त करेगा।

push collection.push(model, [options])
Add a model at the end of a collection. Takes the same options as add .

pop collection.pop([options])
Remove and return the last model from a collection. Takes the same options as remove .

unshift collection.unshift(model, [options])
Add a model at the beginning of a collection. Takes the same options as add .

shift collection.shift([options])
Remove and return the first model from a collection. Takes the same options as remove .

slice collection.slice(begin, end)
Return a shallow copy of this collection's models, using the same options as native Array#slice .

length collection.length
Like an array, a Collection maintains a length property, counting the number of models it contains.

comparator collection.comparator
By default there is no comparator for a collection. If you define a comparator, it will be used to maintain the collection in sorted order. This means that as models are added, they are inserted at the correct index in collection.models . A comparator can be defined as a sortBy (pass a function that takes a single argument), as a sort (pass a comparator function that expects two arguments), or as a string indicating the attribute to sort by.

"sortBy" comparator functions take a model and return a numeric or string value by which the model should be ordered relative to others. "sort" comparator functions take two models, and return -1 if the first model should come before the second, 0 if they are of the same rank and 1 if the first model should come after. Note that Backbone depends on the arity of your comparator function to determine between the two styles, so be careful if your comparator function is bound.

Note how even though all of the chapters in this example are added backwards, they come out in the proper order:

var Chapter  = Backbone.Model;
var chapters = new Backbone.Collection;

chapters.comparator = 'page';

chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));

alert(chapters.pluck('title'));

Collections with a comparator will not automatically re-sort if you later change model attributes, so you may wish to call sort after changing model attributes that would affect the order.

sort collection.sort([options])
Force a collection to re-sort itself. You don't need to call this under normal circumstances, as a collection with a comparator will sort itself whenever a model is added. To disable sorting when adding a model, pass {sort: false} to add . Calling sort triggers a "sort" event on the collection.

pluck collection.pluck(attribute)
Pluck an attribute from each model in the collection. Equivalent to calling map and returning a single attribute from the iterator.

var stooges = new Backbone.Collection([
  {name: "Curly"},
  {name: "Larry"},
  {name: "Moe"}
]);

var names = stooges.pluck("name");

alert(JSON.stringify(names));

where collection.where(attributes)
Return an array of all the models in a collection that match the passed attributes . Useful for simple cases of filter .

var friends = new Backbone.Collection([
  {name: "Athos",      job: "Musketeer"},
  {name: "Porthos",    job: "Musketeer"},
  {name: "Aramis",     job: "Musketeer"},
  {name: "d'Artagnan", job: "Guard"},
]);

var musketeers = friends.where({job: "Musketeer"});

alert(musketeers.length);

findWhere collection.findWhere(attributes)
Just like where , but directly returns only the first model in the collection that matches the passed attributes .

url collection.url or collection.url()
Set the url property (or function) on a collection to reference its location on the server. Models within the collection will use url to construct URLs of their own.

var Notes = Backbone.Collection.extend({
  url: '/notes'
});

// Or, something more sophisticated:

var Notes = Backbone.Collection.extend({
  url: function() {
    return this.document.url() + '/notes';
  }
});

parse collection.parse(response, options)
parse is called by Backbone whenever a collection's models are returned by the server, in fetch . The function is passed the raw response object, and should return the array of model attributes to be add to the collection. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.

var Tweets = Backbone.Collection.extend({
  // The Twitter Search API returns tweets under "results".
  parse: function(response) {
    return response.results;
  }
});

clone collection.clone()
Returns a new instance of the collection with an identical list of models.

fetch collection.fetch([options])
Fetch the default set of models for this collection from the server, setting them on the collection when they arrive. The options hash takes success and error callbacks which will both be passed (collection, response, options) as arguments. When the model data returns from the server, it uses setting to (intelligently) merge the fetched models, unless you pass {reset: true} , in which case the collection will be (efficiently) reset . Delegates to Backbone.sync under the covers for custom persistence strategies and returns a jqXHR . The server handler for fetch requests should return a JSON array of models.

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};

var accounts = new Backbone.Collection;
accounts.url = '/accounts';

accounts.fetch();

The behavior of fetch can be customized by using the available setting options. For example, to fetch a collection, getting an "add" event for every new model, and a "change" event for every changed existing model, without removing anything: collection.fetch({remove: false})

jQuery.ajax options can also be passed directly as fetch options, so to fetch a specific page of a paginated collection: Documents.fetch({data: {page: 3}})

Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. fetch is intended for lazily-loading models for interfaces that are not needed immediately: for example, documents with collections of notes that may be toggled open and closed.

create collection.create(attributes, [options])
Convenience to create a new instance of a model within a collection. Equivalent to instantiating a model with a hash of attributes, saving the model to the server, and adding the model to the set after being successfully created. Returns the new model. If client-side validation failed, the model will be unsaved, with validation errors. In order for this to work, you should set the model property of the collection. The create method can accept either an attributes hash or an existing, unsaved model object.

Creating a model will cause an immediate "add" event to be triggered on the collection, a "request" event as the new model is sent to the server, as well as a "sync" event, once the server has responded with the successful creation of the model. Pass {wait: true} if you'd like to wait for the server before adding the new model to the collection.

var Library = Backbone.Collection.extend({
  model: Book
});

var nypl = new Library;

var othello = nypl.create({
  title: "Othello",
  author: "William Shakespeare"
});

Backbone.Router

Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Until recently, hash fragments ( #page ) were used to provide these permalinks, but with the arrival of the History API, it's now possible to use standard URLs ( /page ). Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. For browsers which don't yet support the History API, the Router handles graceful fallback and transparent translation to the fragment version of the URL.

During page load, after your application has finished creating all of its routers, be sure to call Backbone.history.start() or Backbone.history.start({pushState: true}) to route the initial URL.

extend Backbone.Router.extend(properties, [classProperties])
Get started by creating a custom router class. Define actions that are triggered when certain URL fragments are matched, and provide a routes hash that pairs routes to actions. Note that you'll want to avoid using a leading slash in your route definitions:

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

routes router.routes
The routes hash maps URLs with parameters to functions on your router (or just direct function definitions, if you prefer), similar to the View 's events hash . Routes can contain parameter parts, :param , which match a single URL component between slashes; and splat parts *splat , which can match any number of URL components. Part of a route can be made optional by surrounding it in parentheses (/:optional) .

For example, a route of "search/:query/p:page" will match a fragment of #search/obama/p2 , passing "obama" and "2" to the action.

A route of "file/*path" will match #file/folder/file.txt , passing "folder/file.txt" to the action.

A route of "docs/:section(/:subsection)" will match #docs/faq and #docs/faq/installing , passing "faq" to the action in the first case, and passing "faq" and "installing" to the action in the second.

A nested optional route of "docs(/:section)(/:subsection)" will match #docs , #docs/faq , and #docs/faq/installing , passing "faq" to the action in the second case, and passing "faq" and "installing" to the action in the third.

Trailing slashes are treated as part of the URL, and (correctly) treated as a unique route when accessed. docs and docs/ will fire different callbacks. If you can't avoid generating both types of URLs, you can define a "docs(/)" matcher to capture both cases.

When the visitor presses the back button, or enters a URL, and a particular route is matched, the name of the action will be fired as an Events , so that other objects can listen to the router, and be notified. In the following example, visiting #help/uploading will fire a route:help event from the router.

routes: {
  "help/:page":         "help",
  "download/*path":     "download",
  "folder/:name":       "openFolder",
  "folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
  ...
});

constructor / initialize new Router([options])
When creating a new router, you may pass its routes hash directly as an option, if you choose. All options will also be passed to your initialize function, if defined.

route router.route(route, name, [callback])
Manually create a route for the router, The route argument may be a routes or regular expression. Each matching capture from the route or regular expression will be passed as an argument to the callback. The name argument will be triggered as a "route:name" event whenever the route is matched. If the callback argument is omitted router[name] will be used instead. Routes added later may override previously declared routes.

initialize: function(options) {

  // Matches #page/10, passing "10"
  this.route("page/:number", "page", function(number){ ... });

  // Matches /117-a/b/c/open, passing "117-a/b/c" to this.open
  this.route(/^(.*?)\/open$/, "open");

},

open: function(id) { ... }

navigate router.navigate(fragment, [options])
Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL. If you also wish to call the route function, set the trigger option to true . To update the URL without creating an entry in the browser's history, set the replace option to true .

openPage: function(pageNumber) {
  this.document.pages.at(pageNumber).open();
  this.navigate("page/" + pageNumber);
}

# Or ...

app.navigate("help/troubleshooting", {trigger: true});

# Or ...

app.navigate("help/troubleshooting", {trigger: true, replace: true});

execute router.execute(callback, args, name)
This method is called internally within the router, whenever a route matches and its corresponding callback is about to be executed. Return false from execute to cancel the current transition. Override it to perform custom parsing or wrapping of your routes, for example, to parse query strings before handing them to your route callback, like so:

var Router = Backbone.Router.extend({
  execute: function(callback, args, name) {
    if (!loggedIn) {
      goToLogin();
      return false;
    }
    args.push(parseQueryString(args.pop()));
    if (callback) callback.apply(this, args);
  }
});

Backbone.history

History serves as a global router (per frame) to handle hashchange events or pushState , match the appropriate route, and trigger callbacks. You shouldn't ever have to create one of these yourself since Backbone.history already contains one.

pushState support exists on a purely opt-in basis in Backbone. Older browsers that don't support pushState will continue to use hash-based URL fragments, and if a hash URL is visited by a pushState -capable browser, it will be transparently upgraded to the true URL. Note that using real URLs requires your web server to be able to correctly render those pages, so back-end changes are required as well. For example, if you have a route of /documents/100 , your web server must be able to serve that page, if the browser visits that URL directly. For full search-engine crawlability, it's best to have the server generate the complete HTML for the page ... but if it's a web application, just rendering the same content you would have for the root URL, and filling in the rest with Backbone Views and JavaScript works fine.

start Backbone.history.start([options])
When all of your Routers have been created, and all of the routes are set up properly, call Backbone.history.start() to begin monitoring hashchange events, and dispatching routes. Subsequent calls to Backbone.history.start() will throw an error, and Backbone.History.started is a boolean value indicating whether it has already been called.

To indicate that you'd like to use HTML5 pushState support in your application, use Backbone.history.start({pushState: true}) . If you'd like to use pushState , but have browsers that don't support it natively use full page refreshes instead, you can add {hashChange: false} to the options.

If your application is not being served from the root url / of your domain, be sure to tell History where the root really is, as an option: Backbone.history.start({pushState: true, root: "/public/search/"})

When called, if a route succeeds with a match for the current URL, Backbone.history.start() returns true . If no defined route matches the current URL, it returns false .

If the server has already rendered the entire page, and you don't want the initial route to trigger when starting History, pass silent: true .

Because hash-based history in Internet Explorer relies on an <iframe> , be sure to call start() only after the DOM is ready.

$(function(){
  new WorkspaceRouter();
  new HelpPaneRouter();
  Backbone.history.start({pushState: true});
});

Backbone.sync

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses jQuery.ajax to make a RESTful JSON request and returns a jqXHR . You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.

The method signature of Backbone.sync is sync(method, model, [options])

  • method – the CRUD method ( "create" , "read" , "update" , or "delete" )
  • model – the model to be saved (or collection to be read)
  • options – success and error callbacks, and all other jQuery request options

With the default implementation, when Backbone.sync sends up a request to save a model, its attributes will be passed, serialized as JSON, and sent in the HTTP body with content-type application/json . When returning a JSON response, send down the attributes of the model that have been changed by the server, and need to be updated on the client. When responding to a "read" request from a collection ( fetch ), send down an array of model attribute objects.

Whenever a model or collection begins a sync with the server, a "request" event is emitted. If the request completes successfully you'll get a "sync" event, and an "error" event if not.

The sync function may be overridden globally as Backbone.sync , or at a finer-grained level, by adding a sync function to a Backbone collection or to an individual model.

The default sync handler maps CRUD to REST like so:

  • create → POST /collection
  • read → GET /collection[/id]
  • update → PUT /collection/id
  • patch → PATCH /collection/id
  • delete → DELETE /collection/id

As an example, a Rails 4 handler responding to an "update" call from Backbone might look like this:

def update
  account = Account.find params[:id]
  permitted = params.require(:account).permit(:name, :otherparam)
  account.update_attributes permitted
  render :json => account
end

One more tip for integrating Rails versions prior to 3.1 is to disable the default namespacing for to_json calls on models by setting ActiveRecord::Base.include_root_in_json = false

ajax Backbone.ajax = function(request) { ... };
If you want to use a custom AJAX function, or your endpoint doesn't support the jQuery.ajax API and you need to tweak things, you can do so by setting Backbone.ajax .

emulateHTTP Backbone.emulateHTTP = true
If you want to work with a legacy web server that doesn't support Backbone's default REST/HTTP approach, you may choose to turn on Backbone.emulateHTTP . Setting this option will fake PUT , PATCH and DELETE requests with a HTTP POST , setting the X-HTTP-Method-Override header with the true method. If emulateJSON is also on, the true method will be passed as an additional _method parameter.

Backbone.emulateHTTP = true;

model.save();  // POST to "/collection/id", with "_method=PUT" + header.

emulateJSON Backbone.emulateJSON = true
If you're working with a legacy web server that can't handle requests encoded as application/json , setting Backbone.emulateJSON = true; will cause the JSON to be serialized under a model parameter, and the request to be made with a application/x-www-form-urlencoded MIME type, as if from an HTML form.

Backbone.View

Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view's render function to the model's "change" event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.

extend Backbone.View.extend(properties, [classProperties])
Get started with views by creating a custom view class. You'll want to override the render function, specify your declarative events , and perhaps the tagName , className , or id of the View's root element.

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

Properties like tagName , id , className , el , and events may also be defined as a function, if you want to wait to define them until runtime.

constructor / initialize new View([options])
There are several special options that, if passed, will be attached directly to the view: model , collection , el , id , className , tagName , attributes and events . If the view defines an initialize function, it will be called when the view is first created. If you'd like to create a view that references an element already in the DOM, pass in the element as an option: new View({el: existingElement})

var doc = documents.first();

new DocumentRow({
  model: doc,
  id: "document-row-" + doc.id
});

el view.el
All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible.

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName , className , id and attributes properties. If none are set, this.el is an empty div , which is often just fine. An el reference may also be passed in to the view's constructor.

var ItemView = Backbone.View.extend({
  tagName: 'li'
});

var BodyView = Backbone.View.extend({
  el: 'body'
});

var item = new ItemView();
var body = new BodyView();

alert(item.el + ' ' + body.el);

$el view.$el
A cached jQuery object for the view's element. A handy reference instead of re-wrapping the DOM element all the time.

view.$el.show();

listView.$el.append(itemView.el);

setElement view.setElement(element)
If you'd like to apply a Backbone view to a different DOM element, use setElement , which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

attributes view.attributes
A hash of attributes that will be set as HTML DOM element attributes on the view's el (id, class, data-properties, etc.), or a function that returns such a hash.

$ (jQuery) view.$(selector)
If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view.$el.find(selector)

ui.Chapter = Backbone.View.extend({
  serialize : function() {
    return {
      title: this.$(".title").text(),
      start: this.$(".start-page").text(),
      end:   this.$(".end-page").text()
    };
  }
});

template view.template([data])
While templating for a view isn't a function provided directly by Backbone, it's often a nice convention to define a template function on your views. In this way, when rendering your view, you have convenient access to instance data. For example, using Underscore templates:

var LibraryView = Backbone.View.extend({
  template: _.template(...)
});

render view.render()
The default implementation of render is a no-op. Override this function with your code that renders the view template from model data, and updates this.el with the new HTML. A good convention is to return this at the end of render to enable chained calls.

var Bookmark = Backbone.View.extend({
  template: _.template(...),
  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }
});

Backbone is agnostic with respect to your preferred method of HTML templating. Your render function could even munge together an HTML string, or use document.createElement to generate a DOM tree. However, we suggest choosing a nice JavaScript templating library. Mustache.js , Haml-js , and Eco are all fine alternatives. Because Underscore.js is already on the page, _.template is available, and is an excellent choice if you prefer simple interpolated-JavaScript style templates.

Whatever templating strategy you end up with, it's nice if you never have to put strings of HTML in your JavaScript. At DocumentCloud, we use Jammit in order to package up JavaScript templates stored in /app/views as part of our main core.js asset package.

remove view.remove()
Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has registered 'd.

events view.events or view.events()
The events hash (or method) can be used to specify a set of DOM events that will be bound to methods on your View through delegateEvents .

Backbone will automatically attach the event listeners at instantiation time, right before invoking initialize .

var ENTER_KEY = 13;
var InputView = Backbone.View.extend({

  tagName: 'input',

  events: {
    "keydown" : "keyAction",
  },

  render: function() { ... },

  keyAction: function(e) {
    if (e.which === ENTER_KEY) {
      this.collection.add({text: this.$el.val()});
    }
  }
});

delegateEvents delegateEvents([events])
Uses jQuery's on function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source. Events are written in the format {"event selector": "callback"} . The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element ( this.el ). By default, delegateEvents is called within the View's constructor for you, so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself.

The events property may also be defined as a function that returns an events hash, to make it easier to programmatically define your events, as well as inherit them from parent views.

Using delegateEvents provides a number of advantages over manually using jQuery to bind events to child elements during render . All attached callbacks are bound to the view before being handed off to jQuery, so when the callbacks are invoked, this continues to refer to the view object. When delegateEvents is run again, perhaps with a different events hash, all callbacks are removed and delegated afresh — useful for views which need to behave differently when in different modes.

A single-event version of delegateEvents is available as delegate . In fact, delegateEvents is simply a multi-event wrapper around delegate . A counterpart to undelegateEvents is available as undelegate .

A view that displays a document in a search result might look something like this:

var DocumentView = Backbone.View.extend({

  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  },

  open: function() {
    window.open(this.model.get("viewer_url"));
  },

  select: function() {
    this.model.set({selected: true});
  },

  ...

});

undelegateEvents undelegateEvents()
Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

उपयोगिता

Backbone.noConflict var backbone = Backbone.noConflict();
Returns the Backbone object back to its original value. You can use the return value of Backbone.noConflict() to keep a local reference to Backbone. Useful for embedding Backbone on third-party websites, where you don't want to clobber the existing Backbone.

var localBackbone = Backbone.noConflict();
var model = localBackbone.Model.extend(...);

Backbone.$ Backbone.$ = $;
If you have multiple copies of jQuery on the page, or simply want to tell Backbone to use a particular object as its DOM / Ajax library, this is the property for you.

Backbone.$ = require('jquery');

原文