شرح مفصل للمجموعات في العمود الفقري.

مجموعة Backbone.js هي مجرد نموذج مجموعة بسيط. من خلال التكيف مع النماذج والمجموعات ، يمكننا تجنب وضع منطق معالجة البيانات في طبقة عرضنا. بالإضافة إلى ذلك ، توفر النماذج والمجموعات طرقًا مريحة للعمل مع الواجهة الخلفية ، وعندما تتغير البيانات ، يمكن تمييز طرق عرض Backbone.js تلقائيًا. وبهذه الطريقة ، يمكن استخدامه في الحالات التالية:

نسخة الكود كما يلي:

النموذج: حيوان ، مجموعة: حديقة الحيوان

عادةً ما تكون مجموعتك مناسبة فقط لنموذج واحد ، ولكن النموذج نفسه لا يقتصر على نوع المجموعة.

نسخة الكود كما يلي:

النموذج: شخص ، مجموعة: مكتب

النموذج: شخص ، مجموعة: الصفحة الرئيسية

فيما يلي أمثلة على النماذج/المجموعات الشائعة:

نسخة الكود كما يلي:

var music = backbone.model.extend ({

تهيئة: function () {

console.log ("مرحبًا بك في عالم الموسيقى") ؛

}

}) ؛

VAR الألبوم = backbone.collection.extend ({

النموذج: الموسيقى

}) ؛

يخبرنا الرمز أعلاه كيفية إنشاء مجموعة. لكنه لا يخبرنا بعملية معالجة المجموعة بالبيانات. لذلك ، دعونا نستكشف هذه العملية:

نسخة الكود كما يلي:

var music = backbone.model.extend ({

الإعدادات الافتراضية: {

الاسم: "غير محدد" ،

الفنان: "غير محدد"

} ،

تهيئة: function () {

console.log ("مرحبًا بك في عالم الموسيقى") ؛ }

}) ؛

VAR الألبوم = backbone.collection.extend ({

النموذج: الموسيقى

}) ؛

var music1 = new music ({id: 1 ، name: "How Bizarre" ، Artist: "OMC"}) ؛

var music 2 = new music ({id: 2 ، الاسم: "ما يؤلمني أكثر" ، فنان: "Rascal Flatts"}) ؛

var myalbum = ألبوم جديد ([Music 1 ، Music 2]) ؛

console.log (myalbum.models) ؛

دعونا نلقي نظرة على العلاقة بين مجموعة Backbone.js والمكونات الأخرى:

1. أضف نموذجًا إلى المجموعة

كما نعلم ، المجموعة هي مجموعة من النماذج. لذلك ، يمكننا إضافة نماذج على المجموعة. لإضافة نموذج إلى مجموعة ، يمكننا استخدام طريقة إضافة. يمكننا أيضًا إضافة النموذج إلى بداية المجموعة - باستخدام طريقة UNSHIFT.

نسخة الكود كما يلي:

var music3 = new music ({id: 3 ، name: "yes i do" ، الفنان: "Rascal Flatts"}) ؛

music.add (music3) ؛

console.log ("أغنية جديدة تمت إضافة") ؛

console.log (json.stringify (music)) ؛

2. قم بإزالة النموذج من المجموعة

في كثير من الأحيان ، نحتاج إلى إزالة بعض البيانات المحددة من المجموعة. لإزالة النموذج من المجموعة ، نحتاج إلى توفير معرف النموذج. إذا أردنا استبدال المجموعة الأصلية بمجموعة بيانات جديدة كاملة ، فيمكننا استخدام طريقة إعادة الضبط.

نسخة الكود كما يلي:

music.remove (1) ؛

console.log ('كيف تمت إزالة ...') ؛

console.log (json.stringify (music)) ؛

3. احصل وضبط

إذا احتجنا إلى الحصول على قيمة من مجموعة أخرى في الكود ، فيمكننا استخدام طريقة GET مباشرة. في هذه المرحلة ، نقوم بتمرير قيمة المعرف إلى النموذج مع البحث.

نسخة الكود كما يلي:

console.log (json.stringify (music.get (2))) ؛

هناك تطبيق مثير للاهتمام لطريقة مجموعة المجموعة. تقوم طريقة SET بتحديثات "ذكية" للمجموعة عن طريق تمرير قائمة النماذج. إذا لم يكن النموذج الموجود في القائمة في المجموعة ، فسيتم إضافته إلى المجموعة. إذا كان النموذج بالفعل في المجموعة ، يتم دمج خصائصه. إذا كانت المجموعة تحتوي على أي نموذج لا ينتمي إلى القائمة ، فسيتم إزالة النموذج.

نسخة الكود كما يلي:

var music = backbone.model.extend ({

// يجب تعيين هذه السمة على أنها افتراضية

الإعدادات الافتراضية: {

اسم: ''

} ،

// قم بتعيين سمة المعرف بحيث تكون المجموعة

idattribute: 'id'

}) ؛

var song = backbone.collection.extend ({

النموذج: الموسيقى

}) ؛

نماذج var = [{

الاسم: 'OMC' ،

معرف: 1

} ، {

الاسم: "Flatts" ،

معرف: 2

}] ؛

Var Collection = New Song (Models) ؛

collection.bind ('add' ، function (model) {

تنبيه ('addb')

}) ؛

collection.bind ('remove' ، function () {

تنبيه ("إضافة")

}) ؛

النماذج = [{

الاسم: 'OMC' ،

معرف: 1

} ، {

الاسم: "Flatts" ،

معرف: 2

} ، {

الاسم: "جاكسون" ،

معرف: 3

}] ؛

collection.add (models) ؛

}) ؛

كما رأينا أعلاه ، كان لدينا بالفعل نموذجان مسبقًا ، وعندما أضفنا النموذج الثالث ، ظل النموذج السابق كما هو.

رابعا. مُنشئ وتهيئة

عندما نقوم بإنشاء مجموعة ، يمكننا تمرير المصفوفة المهيئة للنموذج. يمكن إضافة مقارنة المجموعة كخيار. إذا كان خيار المقارنة الذي تم تمريره خطأ ، يتم منع الفرز. إذا حددنا وظيفة التهيئة ، فسيتم استدعاء هذه الوظيفة عند إنشاء المجموعة. فيما يلي العديد من الخيارات ، إذا تم توفيرها ، سيتم إضافة مباشرة إلى المجموعة: النموذج والمقارنة.

نسخة الكود كما يلي:

var tabs = tabset جديد ([tab1 ، tab2 ، tab3]) ؛

var spaces = backbone.collection ([] ، {

النموذج: الفضاء

}) ؛

5. توجسون

تقوم طريقة ToJSO بإرجاع صفيف في المجموعة التي تحتوي على كل سمة تجزئة نموذج. عادة ما تستخدم هذه الطريقة لتسلسل المجموعة بأكملها.

نسخة الكود كما يلي:

var song = new backbone.collection ([[

{الاسم: "Flatts"} ،

{الاسم: "OMC"} ،

{الاسم: "جاكسون"}

]) ؛

ALERT (json.stringify (song)) ؛

6. المقارنة

بشكل افتراضي ، لا تحتوي المجموعات على مقارنات. إذا حددنا المقارنة ، فيمكن استخدامه للحفاظ على المجموعة في نوع ما. هذا يعني أنه عند إضافة نموذج ، يتم إدراج النموذج في الموقع المناسب في المجموعة. يمكن تعريف المقارنة في sortby ، أو يشير إلى خصائص مصنفة في سلسلة.

تحصل وظيفة مقارنة Sortby على نموذج وإرجاع رقم أو سلسلة.

وظيفة المقارنة الفرز تحصل على نموذجين. إذا كان النموذج الأول قبل النموذج الثاني ، فإنه يعود -1 ؛ إذا كان النموذجان من نفس المستوى ، فإن إرجاع 0 ؛ إذا كان النموذج الثاني قبل النموذج الأول ، فسيتم إرجاع 1.

لنلقي نظرة على المثال أدناه:

نسخة الكود كما يلي:

var student = backbone.model ؛

VAR students = New Backbone.Collection ؛

students.comparator = 'name' ؛

students.Add (sturder new ({name: "name1" ، Roll: 9})) ؛

students.Add (sturder new ({name: "name2" ، Roll: 5})) ؛

students.Add (sturder new ({name: "name3" ، Roll: 1})) ؛

ALERT (student.pluck ('Roll')) ؛

لم يتم إعادة ترتيب المجموعة المراد مقارنتها تلقائيًا ، حتى لو قمنا بتعديل خصائص النموذج. لذلك ، يجب أن نسمي الفرز عندما يؤثر التقدير على النوع بعد تعديل سمات النموذج.

7. فرز

عند إضافة نماذج إلى مجموعة ، يجب إجبار المجموعة على إعادة ترتيبها. لتعطيل الفرز عند إضافة نموذج تجميع ، يمكنك تمرير المعلمة {sort: false}. استدعاء المشغل المرتبة يتحقق من هذه المعلمة.

نسخة الكود كما يلي:

sortbytype: function (type) {

this.sortkey = type ؛

this.sort () ؛

}

وعرض وظائف:

نسخة الكود كما يلي:

SortThingsByColumn: وظيفة (حدث) {

var type = event.currentTarget.ClassList [0]

this.collections.things.sortbytype (النوع)

this.render ()

}

8. اختيار

نتف: اختر سمة واحدة من كل نموذج في المجموعة ، وهو ما يعادل استدعاء الخريطة من التكرار وإعادة سمة واحدة.

نسخة الكود كما يلي:

var song = new backbone.collection ([[

{الاسم: "Flatts"} ،

{الاسم: "OMC"} ،

{الاسم: "جاكسون"}

]) ؛

var names = songs.pluck ("name") ؛

ALERT (json.stringify (names)) ؛

9. أين

حيث: إرجاع مجموعة من النماذج في المجموعة التي تتطابق مع الخصائص التي تم تمريرها ، باستخدام المرشحات.

نسخة الكود كما يلي:

var song = new backbone.collection ([[

{الاسم: "نعم أفعل" ، الفنان: "Flatts"} ،

{الاسم: "كيف غريب" ، فنان: "كيف غريب"} ،

{الاسم: "ما يؤلم أكثر" ، فنان: "Flatts"} ،

]) ؛

var Artists = song.where ({Artist: "flatts"}) ؛

تنبيه (الفنانين. الطول) ؛

10. URL

سيشير تعيين خصائص URL في المجموعة إلى موقع الخادم. ستستخدم النماذج داخل المجموعة عنوان URL هذا لبناء عنوان URL الخاص بهم.

نسخة الكود كما يلي:

أغاني var = backbone.collection.extend ({

عنوان URL: '/songs'

}) ؛

أغاني var = backbone.collection.extend ({

url: function () {

إرجاع this.document.url () + '/songs' ؛

}

}) ؛

11. التحليل

Parse: استدعى العمود الفقري عند الجلب ، بغض النظر عما إذا كان الخادم يرجع نموذج المجموعة. تمر هذه الوظيفة كائن الاستجابة الأصلي ، والذي يجب أن يعيد مجموعة من خصائص النموذج المضافة إلى المجموعة. التنفيذ الافتراضي هو عدم التشغيل. تمريرة بسيطة من خلال استجابة JSON ، والكتابة فوق هذا باستخدام واجهة برمجة تطبيقات موجودة مسبقًا ، أو استجابة مساحة الاسم بشكل أفضل.

نسخة الكود كما يلي:

أغاني var = backbone.collection.extend ({

تحليل: وظيفة (استجابة) {

استجابة العودة.

}

}) ؛

12. الاستخراج

جلب: استخراج مجموعة النموذج الافتراضي من المجموعة من الخادم ، وقم بتعيينها في المجموعة بعد الاسترجاع. يقبل هذا الخيار تجزئة النجاح أو عوائد الخطأ ، والتي تمرر ثلاث معلمات (مجموعة ، استجابة ، خيار). ثم إرجاع بيانات النموذج من الخادم. يتم استخدامه لإعداد النموذج المستخرج المدمج.

نسخة الكود كما يلي:

backbone.sync = function (الطريقة ، النموذج) {

التنبيه (الطريقة + ":" + model.url) ؛

} ؛

أغاني var = backbone.collection ؛

songs.url = '/songs' ؛

songs.fetch () ؛

كما ترون أعلاه ، هناك العديد من الطرق لإتقانهم لتحسين جودة الكود الخاص بك.