Я пытаюсь сделать простой календарь/список дел с помощью Backbone.js.
У меня есть коллекция дней, каждый из которых может иметь несколько задач. Я хотел бы отображать каждую дату в неупорядоченный список, содержащий неупорядоченный список задач. Вот мой HTML:
<ul id="days-list">
<!-- #day-tpl -->
</ul>
<script id="day-tpl" type="tpl">
<h1>To-do for {{name}}</h1>
<ul class="todos-list">
<!-- todo-tpl -->
</ul>
</script>
<script id="todo-tpl" type="tpl">
{{title}}
</script>
И вот мой JS на данный момент (у меня есть Backbone, Backbone.Marionette и Backbone.Relational, включенные в HTML).
Todo = Backbone.RelationalModel.extend({});
Todos = Backbone.Collection.extend({
model: Todo,
idAttribute: 'id_todo'
});
Day = Backbone.RelationalModel.extend({
relations:[{
type: Backbone.HasMany,
key: 'todos',
relatedModel: 'Todo',
collectionType: 'Todos',
reverseRelation:{
key: 'day',
includeInJSON: 'id'
}
}]
});
Days = Backbone.Collection.extend({
model: Day
});
TodoView = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: '#todo-tpl'
});
TodosView = Backbone.Marionette.CollectionView.extend({
itemView: TodoView
});
DayView = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: '#day-tpl'
});
DaysView = Backbone.Marionette.CollectionView.extend({
el: $('#days-list'),
itemView: DayView
});
$(document).ready(function(){
var days = new Days([
{
"id": 1,
"name": "Monday",
"todos": [
{
"id_todo": 1,
"title": "Learn Javascript"
},
{
"id_todo": 2,
"title": "Learn Node.js"
}
]
},
{
"id": 2,
"name": "Tuesday",
"todos": [
{
"id_todo": 3,
"title": "Learn Backbone"
},
{
"id_todo": 4,
"title": "Learn Backbone.Marionette"
}
]
}
]);
var daysView = new DaysView({collection: days});
daysView.render();
});
Коллекция Day отображается нормально (спасибо Marionette!), но я не знаю, как я должен отображать коллекции Todo для каждого дня. Есть идеи ? Спасибо !
РЕДАКТИРОВАТЬ: я нашел способ, но я не уверен, что это правильный способ сделать это.
Я отредактировал свой DayView следующим образом:
DayView = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: '#day-tpl',
onRender: function(){
var $todosList = this.$el.find('.todos-list');
var todos = new Todos(this.model.get('todos').toJSON());
var todosView = new TodosView({collection: todos, el: $todosList});
todosView.render();
}
});
Он правильно отображает каждую задачу в нужный день, но использование jquery find и toJSON — это запах кода.