نموذج
فيما يتعلق بالعمود الفقري ، فإن الشيء الأساسي هو النموذج. هذا الشيء مثل نموذج رسم الخرائط لقاعدة البيانات في التطوير الخلفي. إنه أيضًا نموذج لكائنات البيانات ، ويجب أن يكون له نفس سمات النموذج في الواجهة الخلفية (فقط السمات التي يجب تشغيلها من خلال الواجهة الأمامية).
دعنا نلقي نظرة على ما هو نموذج العمود الفقري من المثال خطوة بخطوة.
حدد أولاً صفحة HTML:
<! doctype html> <html> <head> <title> the5fire-backbone-model </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {/***وضع الكود هنا **/})يجب ملء الكود التالي في الوظيفة في علامة البرنامج النصي لهذا HTML.
1. أبسط كائن
man = backbone.model.extend ({initialize: function () {Alert ('hey ، يمكنك إنشاء لي!') ؛}}) ؛ var man = new man ؛هذا بسيط جدا. هناك أيضًا عرض تقديمي في HelloWorld ، دون تحديد السمات. هذه طريقة أثناء التهيئة ، أو مُنشئ.
2. طريقتان لتعيين الكائن
الأول هو تحديد القيمة الافتراضية مباشرة وتعيين القيمة الافتراضية.
MAN = backbone.model.extend ({initialize: function () {Alert ('hey ، يمكنك إنشاءني!') ؛} ، الافتراضات: {name: 'Zhang San' ، العمر: '38'}}) ؛ var man = new man ؛ Alert ('man.get (' name ')) ؛يتم تعريف النوع الثاني عند التعيين
man = backbone.model.extend ({initialize: function () {Alert ('hey ، أنت تنشئني!') ؛}}) ؛ man.set ({name: 'the5fire' ، العمر: '10 '}) ؛ ALERT (man.get (' name ')) ؛عند استخدام GET HAME ، يتم استخدام GET.
3. الأساليب في الكائن
MAN = backbebone.model.extend ({initialize: function () {alert ('hey ، أنت تنشئني!') ؛} ، الافتراضات: {name: 'Zhang San' ، age: '38'} ، aboutme: function () {return 'name' + this. رجل ؛ تنبيه (man.aboutme ()) ؛4. استمع إلى التغييرات في السمات في الكائن
MAN = backbone.model.extend ({{initialize: function () {Alert ('hey ، أنت تنشئني!') ؛ // bind الاستماع أثناء التهيئة this.bind ("تغيير: الاسم" ، الدالة () } ، aboutme: function () {return "اسمي" + this.get ('name') + '، هذا العام' + this.get ('age') + 'year' ؛ var man = new man ؛ man.set ({name: 'the5fire'}) // Trigger the Bound Change Event ، Alert.5. إضافة قواعد التحقق إلى الكائن ومطالبات الخطأ
MAN = backbropone.model.extend ({initialize: function () {Alert ('hey ، يمكنك إنشاء لي!') ؛ // bind الاستماع أثناء التهيئة this.bind ("تغيير: الاسم" ، الدالة () {var name = this.get ("name") ؛ ALERT ("قمت بتغيير سمة الاسم إلى:" + اسم) ؛}) ؛ }) ؛ }}) ؛ var man = new man ؛ man.set ({name: ''}) ؛ // وفقًا لقواعد التحقق ، تظهر رسالة خطأ.6. يتطلب الاستحواذ وتخزين الكائنات دعمًا من جانب الخادم.
أولاً ، تحتاج إلى تحديد سمة عنوان URL للكائن. عند استدعاء طريقة حفظ ، سيتم نشر جميع سمات الكائن على الخادم.
MAN = backbone.model.extend ({url: '/save/' ، initialize: function () {alert ('hey ، يمكنك إنشاء لي!') ؛ // bind الاستماع أثناء التهيئة this.bind ( تنبيه (خطأ) ؛ "عمره سنة" ؛}) ؛ فار مان = رجل جديد ؛ // سيتم إرسال المنشور إلى عنوان URL المقابل للنموذج ، وتنسيق البيانات هو json {"name": "the5fire" ، "Age": 38} // ثم الحصول على البيانات من جانب الخادم باستخدام الطريقة احصل أو نشر على جانب الخادم. man1.fetch () ؛ // في الحالة الثانية ، أضف معلمات لجلبها ، على النحو التالي: man1.fetch ({url: '/getmans/'}) ؛ // بهذه الطريقة ، سيتم إرسال طلب الحصول على عنوان URL/getmans/. // يجب أن يكون نمط النتيجة الذي تم إرجاعه بواسطة الخادم هو بيانات تنسيق JSON المقابلة ، وهو نفس تنسيق المنشور عند حفظه. // ومع ذلك ، فإن طريقة قبول البيانات التي يتم إرجاعها بواسطة الخادم هي كما يلي: man1.fetch ({url: '/getmans/' ، النجاح: الوظيفة (النموذج ، الاستجابة) {ALERT ('النجاح') تنبيه (خطأ ') ؛ملاحظة: الرموز المذكورة أعلاه هي رموز فقط يمكن تنفيذها بشكل طبيعي ، ولكن ستكون هناك مثيلات حول جانب الخادم لاحقًا.
يجب إضافة هنا أن التشغيل غير المتزامن للخادم يتم إكماله من خلال طريقة backbone.sync. عند استدعاء هذه الطريقة ، سيتم تمرير المعلمة تلقائيًا وسيتم إرسال الطلب المقابل إلى الخادم وفقًا للمعلمات. على سبيل المثال ، إذا قمت بالحفظ وستحدد العمود الفقري ما إذا كان كائنك جديدًا. إذا تم إنشاؤه حديثًا ، يتم إنشاء المعلمة. إذا كان كائنًا موجودًا ، فقد تم تغييره فقط ، ثم يتم تحديث المعلمة. إذا قمت باستدعاء طريقة الجلب ، تتم قراءة المعلمة. إذا كان مصيرًا ، فسيتم حذف المعلمة. وهذا يعني أن ما يسمى CRUD ("Create" أو "Read" أو "Update" أو "Delete") ، وأنواع الطلبات المقابلة لهذه المعلمات الأربعة هي Post و Get و Put و Delete. يمكنك عمل عمليات CRUD المقابلة على الخادم بناءً على نوع الطلب هذا.
ملحوظة:
فيما يتعلق بعنوان URL و urlroot ، إذا قمت بتعيين عنوان URL ، فسيقوم CRUD بإرسال الطلب المقابل إلى عنوان URL هذا. ومع ذلك ، هناك مشكلة أخرى وهي أنه يتم إرسال طلب الحذف ، ولكن لا يتم إرسال أي بيانات. ثم لا تعرف أي كائن (السجل) يجب حذفه على جانب الخادم. لذلك هنا مفهوم آخر لعنوان urlroot. بعد تعيين urlroot ، عند إرسال طلبات PUT وحذفها ، يكون عنوان URL للطلب هو: /baseurl/ budapmodel.id] ، حتى تتمكن من تحديث أو حذف الكائن المقابل (السجل) عن طريق استخراج القيم بعد عنوان URL على جانب الخادم.
مجموعة
المجموعة هي مجموعة مرتبة من كائنات النموذج. من السهل جدًا فهم المفهوم. إذا نظرت إليها من خلال بعض الأمثلة ، فستجدها أكثر بساطة.
1. أمثلة حول الكتب ورفع الكتب
book = backbone.model.extend ({defaults: {// شكرًا لك على الإنترنت على تغيير تصحيح القوة الأزرق إلى DefaultStitle: 'الافتراضي'} ، تهيئة: function () {// ALERT ('hey ، يمكنك إنشاء لي!) ؛ 'book1'}) ؛ var book2 = new book ({title: 'book2'}) ؛ var book3 = new book ({title: 'Book3'}) ؛ // var bookshelf = new bookshelf ([book1 ، book2 ، book3]) ؛ // لاحظ أنه صفيف ، أو استخدم addvar bookshelf = wondshelf bandshelf.add (book1) ؛ bookshelf.add (book2) ؛ bookshelf.add (book3) bookshelf.each (وظيفة (كتاب) {Alert (book.get ('title')) ؛}) ؛بسيطة جدا ، لا تفسير
2. استخدم Fetch للحصول على بيانات من جانب الخادم
أولاً ، تحتاج إلى تحديد عنوان URL في رف الكتب أعلاه. لاحظ أن خاصية urlroot غير موجودة في المجموعة. أو تحدد مباشرة قيمة عنوان URL في طريقة الجلب ، على النحو التالي:
bookshelf.fetch ({url: '/getBooks/' ، النجاح: الدالة (المجموعة ، الاستجابة) {collection.each (function (book) {Alert (book.get ('title')) ؛}) ؛} ، error: function () {Alert ('error') ؛}}) ؛هناك أيضًا طريقتان تقبلان قيم الإرجاع. أعتقد أنه من السهل فهم المعنى المحدد. إذا قمت بإرجاع البيانات بالتنسيق الصحيح ، فستتصل بالطريقة النجاح ، وسيتم استدعاء طريقة الخطأ. بالطبع ، تعتمد طريقة الخطأ أيضًا على إضافة نفس المعلمات الرسمية مثل طريقة النجاح.
تنسيق إرجاع الكتب المقابل هو كما يلي: [{'title': 'Book1'} ، {'title': 'Book2'} .....]
3. إعادة تعيين طريقة
عند استخدام هذه الطريقة ، يجب تنسيقها مع الجلب أعلاه. بعد أن تجلب المجموعة البيانات ، سيتم استدعاء طريقة إعادة تعيين ، لذلك تحتاج إلى تحديد طريقة إعادة تعيين أو ربط طريقة إعادة تعيين في المجموعة. فيما يلي مظاهرة لاستخدام الروابط:
bookshelf.bind ('reset' ، showallbooks) ؛ showallbooks = function () {bookshelf.each (function (book) {// قم بتقديم بيانات الكتاب إلى الصفحة.}) ؛}يجب تنفيذ خطوات الربط قبل الجلب.
ويرد أدناه الرمز الكامل حول المجموعة ، والذي يتطلب دعمًا من جانب الخادم. سيتم كتابة البناء من جانب الخادم لاحقًا.
<! doctype html> <html> <head> <title> the5fire-backbone-collection </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min" src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {// collection هي مجموعة مرتبة من النماذج البسيطة/1. تصحيح السلطة الافتراضية: "الافتراضي" ، تهيئة:) : 'Book3'). i <bookshelf.length. إعادة تعيين Bookshelf.bind ('Reset' ، showAllbooks) ؛ Bookshelf.each (Book) {// قم بتقديم بيانات الكتاب إلى الصفحة.) ؛