Главная

Webmacter V.2 Всё для вебмастера » Уроки по JS » Backbone.js 20 – Laravel и захват данных из БД

Backbone.js 20 – Laravel и захват данных из БД

Backbone.js 20 – Laravel и захват данных из БД


С этого видеоурока мы начнем увлекательное знакомство с тем, как 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
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.