Продолжаем строить наше приложение. Сегодня создадим базовую js архитектуру нашего приложения.
И снова здравствуйте! Начнем с предзагрузки данных и запуска приложения:
<!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 src="js/main.js"></script>
<script src="js/models.js"></script>
<script src="js/collections.js"></script>
<script src="js/views.js"></script>
<script src="js/router.js"></script>
<script>
new App.Router();
Backbone.history.start();
App.contacts = new App.Collections.Contacts();
App.contacts.fetch().then(function() {
new App.Views.App({ collection: App.contacts });
});
</script>
</body>
</html>Теперь напишем роутер и стартовый маршрут:
App.Router = Backbone.Router.extend({
routes: {
'' : 'index'
},
index: function() {
console.log('Index!!!');
}
});Далее коллекция и модель:
App.Collections.Contacts = Backbone.Collection.extend({
model: App.Models.Contact,
url: '/contacts'
});
App.Models.Contact = Backbone.Model.extend({
//validate
});И в завершении главный вид приложения, который будет запускать все остальные виды:
/*
|---------------------------------------------------
| Global App View
|---------------------------------------------------
*/
App.Views.App = Backbone.View.extend({
initialize: function() {
console.log( this.collection.toJSON() );
}
});В консоли успешно выводиться наша стянутая с сервера коллекция контактов. Здорово! До скорых встреч. Скоро мы оживим наше приложение!
Источник:loftblog
