我正在尝试使用 Backbone.js 制作一个简单的日历/待办事项列表。
我有一个 Days 集合，每个 Days 可以有多个 Todos。我想将每个日期呈现为一个无序列表，其中包含一个无序列表的待办事项列表。这是我的 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（我在 HTML 中包含 Backbone、Backbone.Marionette 和 Backbone.Relational）。
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 是一种代码味道。