Константин Зотов
Константин Зотов, Новый мир
Твиттер @kzotov
Почта konstantin.zotov@gmail.com
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/main.js"></script>
var List = Backbone.Model.extend({
defaults: {
id: -1,
name: 'Default TODO list',
}
});
var list1 = new List({
id: '1',
name: 'Список дел на сегодня'
});
var ListView = Backbone.View.extend({ ... }, {
getData: function ($el) {
return {
id: $el.data("list-id"),,
name: $el.find(".todo__name").text()
};
}
});
var listView = new ListView({
el: element, //связываем вьюху с конкретным DOM-элементом
model: listModel //связываем вьюху с моделью
});
function initListModels(){
var models = [];
$(".todo").each(function(){
var listModel = new List(ListView.getData($(this)));
var listView = new ListView({
el: this,
model: listModel
});
models.push(listModel);
});
return models;
}
var ListCollection = Backbone.Collection.extend({
model: List,
url: "/lists", //для формирования AJAX запросов
initialize: function () {
...
}
});
var model = Backbone.Model.extend({ ... });
var view = Backbone.Collection.extend({ ... });
var coll = Backbone.View.extend({ ... });
<script type="text/x-template" id="template">
<article class="todo" data-list-id="<%= id %>">
<div class="todo__header">
<h3 class="todo__name"><%= name %></h3>
</div>
</article>
</script>
var ListView = Backbone.View.extend({
render: function () {
var listTemplate = _.template($("#template").text());
var data = this.model.toJSON();
var markup = listTemplate(data);
this.setElement( $(markup).get(0) );
},
});
//jQuery обработчик
$("#button").on("click", function(){
//формируем массив data
var data = {id: 10, name: 'Очередной туду-лист'};
lists.add(data)
});
//Backbone обработчик
lists.on("add", function( model ) {
var view = new ListView({ model: model });
view.render();
$(".lists").append(view.$el);
});
var ListView = Backbone.View.extend({
events: {
"click .todo__action_remove": "removeAction"
},
removeAction: function (e) {
this.$el.remove();
this.model.remove();
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'index'
'list': 'list'
},
index: function() { //сценарий для индексной страницы }
list: function() { //cценарий для страницы /#list }
});
var router = new Router();
Backbone.history.start();
http://test.ru/#first-route
var router = new Router();
Backbone.history.start({pushState: true});
http://test.ru/pretty-route
routes: {
'': 'index'
'list/:id': 'getList'
'list/:id/edit': 'editList'
},
...
editList: function(id) { ... }
routes: {
'': 'index'
'list/:id': 'getList'
'list/:id/*action': 'actionList'
},
...
actionList: function(id, action) { ... }
Твиттер @kzotov
Почта konstantin.zotov@gmail.com