Модель
Что касается основы, самая основная вещь - модель. Эта вещь похожа на модель картирования базы данных в концентрации. Это также модель объектов данных, и она должна иметь те же атрибуты, что и модель в задней части (только атрибуты, которые должны работать через фронт-энд).
Давайте посмотрим на то, что является моделью магистрали из примера шаг за шагом.
Сначала определите 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.min.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 ($) {/***Установка здесь **/}) (jquery);Следующий код должен быть заполнен в функции в теге сценария этого HTML.
1. Самый простой объект
Man = backbone.model.extend ({initiaze: function () {alert ('eh, вы создаете меня!');}}); Var man = new Man;Это очень просто. В Helloworld также есть модельная презентация, не определяя атрибуты. Это метод во время инициализации или конструктор.
2. Два метода назначения объекта
Первый - напрямую определить и установить значение по умолчанию.
Man = backbone.model.extend ({initiaze: function () {alert («Эй, ты меня создаешь!Второй тип определяется при назначении
Man = backbone.model.extend ({initiaze: function () {alert ('eh, вы создаете меня!');}}); Man.set ({name: 'the5fire', возраст: '10 '}); alert (man.get (' name '));При использовании GET значений используется.
3. Методы в объекте
Man = backbone.model.extend ({initiaze: function () {alert («Эй, ты меня создаешь! Новый человек; оповещение (man.aboutme ());4. Слушайте изменения в атрибутах в объекте
Man = backbone.model.extend ({initiaze: function () {alert («Эй, ты меня создаешь! }, eakme: function () {return 'my name' + this.get ('name') + ', в этом году' + this.get ('age') + 'Год'; var man = new man; man.set ({name: 'the5fire'}) // запустить событие граничного изменения, оповещение.5. Добавить правила проверки в объект и подсказки об ошибках
Man = backbone.model.extend ({initiaze: function () {alert ('eh, вы создаете меня!'); // Привязка прослушивания во время инициализации this.bind («Изменение: имя», function () {var name = this.get ("name"); alert ("вы изменили атрибут имени:" + name); }); }}); var man = new man; man.set ({name: ''}); // Согласно правилам проверки, появляется сообщение об ошибке.6. Приобретение и хранение объектов требуют проверки поддержки на стороне сервера.
Во -первых, вам нужно определить атрибут URL для объекта. При вызове метода сохранения все атрибуты объекта будут размещены на сервере.
Man = backbone.model.extend ({url: '/save/', initiaze: function () {alert ('эй, вы создаете меня!'); // привязка прослушивания во время инициализации this.bind («Изменение: имя», function () {var name = this.get ("name"); alert ("Вы изменили атрибут имени на:" + name); this.bind ("ошибка", функция (модель, ошибка) {alert (ошибка);}); + ', В этом году' + this.get ('age') + 'year'; //The POST will be sent to the url corresponding to the model, and the data format is json{"name":"the5fire","age":38}//Then then get the data from the server side using method fetch([options])var man1 = new Man;//In the first case, if the fetch method is used directly, it will send a get request to the url of your model, //You can perform corresponding operations by determining whether it is Получить или отправить на сторону сервера. man1.fetch (); // во втором случае добавьте параметры в получение следующего: man1.fetch ({url: '/getmans/'}); // Таким образом, запрос GET будет отправлен на URL/Getmans/. // Стиль результата, возвращаемый сервером, должен быть соответствующими данными формата JSON, так же, как формат поста при сохранении. // Тем не менее, метод принятия данных, возвращаемых сервером, является следующим образом: man1.fetch ({url: '/getmans/', успех: функция (модель, ответ) {alert ('успех'); // Модель-это полученное оповещение данных (model.get ('имя')); Alert ('error');ПРИМЕЧАНИЕ. Приведенные выше коды представляют собой только коды, которые могут быть выполнены нормально, но будут случаи на стороне сервера позже.
Здесь следует добавить, что асинхронная работа сервера завершена через метод Backbone.sync. При вызове этого метода параметр будет автоматически передаваться, а соответствующий запрос будет отправлен на сервер в соответствии с параметрами. Например, если вы сохраняете, и магистраль определит, является ли ваш объект новым. Если он вновь создан, параметр создает. Если это существующий объект, он был изменен только, то параметр является обновлением. Если вы называете метод Fetch, параметр читается. Если это Дестри, то параметр удаляется. То есть так называемый CRUD («Create», «Read», «Update» или «Delete»), а типы запросов, соответствующие этим четырем параметрам,-это Post, Get и Delete. Вы можете сделать соответствующие операции CRUD на сервере на основе этого типа запроса.
Примечание:
Что касается URL и URLROOT, если вы установите URL, ваш CRUD отправит соответствующий запрос на этот URL. Тем не менее, другая проблема заключается в том, что запрос удаления отправляется, но данные не отправляются. Тогда вы не знаете, какой объект (запись) должен быть удален на стороне сервера. Итак, вот еще одна концепция Urlroot. После того, как вы установите UrlRoot, когда вы отправляете запросы PUT и DETETE, адрес URL -адреса запроса: /baseurl/tmodel.id], так что вы можете обновить или удалить соответствующий объект (запись), извлекая значения после URL на стороне сервера.
Коллекция
Коллекция является упорядоченной коллекцией модельных объектов. Очень просто понять концепцию. Если вы посмотрите на это через несколько примеров, вы найдете это проще.
1. Примеры книг и книжной полки
Book = backbone.model.extend ({defaults: {// Спасибо пользователям сети за изменение синей коррекции мощности на по умолчанию: 'book1'}); var book2 = новая книга ({название: 'book2'}); var book3 = новая книга ({заголовок: 'book3'}); // var bookshelf = новая книжная полка ([Book1, Book2, Book3]); // Обратите внимание, что это массив, или используйте Addvar Book Sheeffer = New Bookshelf; Bookshelf.add (book1); Booksemelf.add (book2); Bookse.add (Book3); Booksemelf.remove (book3); // На основании подчерки Bookse Sheck.each (function (book) {alert (book.get ('title'));});Очень просто, нет объяснения
2. Используйте Fetch, чтобы получить данные со стороны сервера
Во -первых, вам нужно определить URL на книжной полке выше. Обратите внимание, что свойство Urlroot не существует в коллекции. Или вы напрямую определяете значение URL в методе Fetch следующим образом:
booksemelf.fetch ({url: '/getbooks/', успех: функция (коллекция, ответ) {collection.each (function (book) {alert (book.get ('title'));});}, ошибка: function () {alert ('error');}});Есть также два метода, которые принимают возвратные значения. Я думаю, что легко понять конкретное значение. Если вы вернете данные в правильном формате, вы позвоните по методу успеха, и будет вызван метод ошибки. Конечно, метод ошибки также зависит от добавления тех же формальных параметров, что и метод успеха.
Соответствующий формат возврата книжной полки следующим образом: [{'title': 'book1'}, {'title': 'book2'} .....]
3. Сбросить метод
Когда этот метод используется, он должен быть скоординирован с вышеупомянутым выбором. После того, как сборы извлекут данные, будет вызван метод сброса, поэтому вам необходимо определить метод сброса или связать метод сброса в сборе. Вот демонстрация использования привязки:
bookselshelf.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.min.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> ($) {// Коллекция является упорядоченной коллекцией простых моделей // 1. Blue Power Varice to Defaults Twited: «По умолчанию», инициализируется: function () {// alert («Эй, ты создаешь меня!»); Книга (Название: «Книга3»); I <Booksemelf.models.length; Сбросить к рендерированию Booksemfale.bind ('Reset', Showallbooks); Booksemff.