С этого видеоурока мы начнем увлекательное знакомство с тем, как Backbone работает с сервером.
Привет! В качестве серверного фреймворка, я буду использовать php-фреймворк Laravel. Меня он полностью устраивает, своей простотой и скоростью. Советую и вам его попробовать. База данных mysql, для работы с ней phpmyadmin. Итак приступим. Для начала нам надо создать таблицу в БД. В Laravel, это можно легко сделать совсем без SQL. Для этого нам надо создать миграцию. Подробности вы можете почитать в официальной документации http://laravel.com/docs. Делается это в консоли при помощи прилагающейся к Laravel утилите Artisan. И как точно это осуществить, вы можете посмотреть в приложенном видео. После того как миграция создана, нам нужно написать в ней два метода. Первый создает таблицу, в нем мы описываем все поля таблицы в виде php-переменных, а второй метод – удаляет ее:
<?php
class Create_Tasks_Table {
/**
* Make changes to the database.
*
* @return void
*/
public function up()
{
Schema::create('tasks', function($table)
{
$table->increments('id');
$table->string('title');
$table->boolean('completed')->default(0);
});
}
/**
* Revert the changes to the database.
*
* @return void
*/
public function down()
{
Schema::drop('tasks');
}
}Затем еще пара манипуляций в консоли и наша таблица создана и ждет нас в БД. После этого, добавим пару задач в нашу таблицу.
Теперь мы готовы к тому, чтобы написать нашу backbone модель. Все так, как мы уже умеем. Но в этот раз писать будем сразу же в верстке, в теге script. В моем случае это индексный вид Laravel.Код следующий:
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<h1>Hello World</h1>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script>
(function() {
window.App = {
Models: {},
Views: {},
Collections: {}
};
App.Models.Task = Backbone.Model.extend({
defaults: {
title: '',
completed: 0,
id: ''
},
urlRoot: 'tasks'
});
}());
</script>
</body>
</html>В модели помимо свойств по умолчанию, надо указать URL, по которому она будет дергать данные. Свойство urlRoot: со значением tasks. Попробуем в консоли создать новый экземпляр модели и схватить данные. Схватывание данных, осуществляет метод Backbone fetch():
var task = new App.Models.Task({id:1});
task.fetch();Мы увидели, что на сервер отправлен GET-запрос, но без успеха, потому что пока, что мы никак не обрабатываем его на серверной стороне. Давайте это исправим. Идем в роуты Laravel и пишем новый роут. В нем возвращаем именно ту задачу, которая была выбрана из БД по айдишнику, в нашем случае первую, так как при создании модели был указан именно первый айдишник:
Route::get('/tasks/(:num)', function($id)
{
return json_encode( Mission::find($id) );
});Проверим в браузере и убедимся, что теперь в модель забиваются именно запрошенные данные. Поздравляю с первой, заполненной серверными данными Backbone моделью.
Источник:loftblog
