Backbone: fetch method can not update the view although the element content is correct - backbone.js

Question

In Backbone app, I need to use localstorage to save some history data. And when the app was loaded for the second time, the history data will be loaded to the page
And the app is still the ToDo task app, the difference, I want to support multiple days record.
so the data structure for my app is as following: one collection (DayCollection), and the model of the collection (Daymodel). Here I use backbone relation extension to support the nested relationship, there is the second model (Todo). And Daymodel and Todo has 1:many relationship.
// A simple todo model
var app = {};
Todo = Backbone.RelationalModel.extend({
defaults: {
title: "New Todo",
completed : true
}
});
var Daymodel = Backbone.RelationalModel.extend({
day: 1,
relations: [{
type: Backbone.HasMany,
key: 'agenda',
relatedModel: 'Todo',
}]
});
var DayCollection = Backbone.Collection.extend({
model: Daymodel,
//localStorage: new Backbone.LocalStorage("test")
});
// A view for an individual todo item
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template( $('#eachitem-template').html() ),
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
// The view for each day panel
var DayView = Backbone.View.extend({
tagName:"div",
template: _.template( $('#eachday-template').html() ),
initialize: function() {
//console.log("call Dayview init")
this.listenTo(this.model, "change", this.render);
this.listenTo(this.model.get("agenda"), "add",this.addNewTodo);
//this.listenTo(this.model,"reset",this.addAll);
//this.model.fetch({reset: true});
//this.model.get("agenda").fetch();
//console.log("current model")
//console.log(this.model);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
addNewTodo: function(todo){
//console.log("debugging addNewTodo");
//console.log(todo);
var newTodoView = new TodoView({model:todo})
//console.log("generated new todo view");
//console.log(newTodoView.render().el);
this.$("ul").append(newTodoView.render().el);
//console.log(this.$("ul").html());
},
addAll: function(){
this.model.get("agenda").each(function(eachitem){
var newTodoView = new TodoView({model:eachitem});
this.$("ul").append(newTodoView.render().el);
});
}
});
// The view for the entire application
var AppView = Backbone.View.extend({
el: $('#todoapp'),
events: {
"click #add-todo" : "createTodo",
"click #add-firebase":"addToFirebase"
},
initialize: function() {
this.daylist = this.$("#container"); // the daylist to append to
this.input = this.$("#new-todo"); // the textbox for new todos
// by listening to when the collection changes we
// can add new items in realtime
this.listenTo(this.collection, 'add', this.addOne);
this.listenTo(this.collection,'reset', this.addAll);
//this.collection.fetch({reset:true});
},
addOne: function(todo) {
//console.log("debugging add one more day")
//console.log(todo)
var view = new DayView({model:todo});
this.daylist.append(view.render().el);
},
addAll: function(){
var self = this;
this.collection.each(function(eachday){
self.addOne(eachday)
});
},
createTodo: function(e) {
if (!this.input.val()) { return; }
// create a new location in firebase and save the model data
// this will trigger the listenTo method above and a new todo view
// will be created as well
//this.collection.last().get("agenda").add({
this.collection.last().get("agenda").add({
title: this.input.val()
});
//this.collection.last().save();
this.input.val('');
},
addToFirebase: function(){
//this.collection.add({
this.collection.create({
day : this.collection.length + 1,
agenda: []
});
}
});
// Create a function to kick off our BackboneFire app
function init() {
// The data we are syncing from our remote Firebase database
var collection = new DayCollection();
var app = new AppView({ collection: collection });
}
// When the document is ready, call the init function
$(function() {
init();
});
<div id="todoapp">
<div id="container">
</div>
<input type="text" id="new-todo" placeholder="New Todo" />
<button id="add-todo">Add New Task</button>
<button id="add-firebase">Add New Day</button>
</div>
<script type="text/template" id="eachday-template">
<h3 class="which-day"> day <%= day %></h3>
<ul id="todo-list"></ul>
</script>
<script type="text/template" id="eachitem-template">
<p class="item-content"><%= title %></p>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-relational/0.10.0/backbone-relational.min.js"></script>
I remove the non-business code, only show the related code here. To make it easier to read the post.
AppView is called with the DayCollection and for each day the DayView will work for that (for each todo, there is another view, I didn't put it here).
And the current status is: the localstorage data is correct (I use debugging method to verify) and the Day level view can work well. The problem, the todo tasks for each day can't be fetched to the page.
In fact I use console.log(this.$("ul").html()); this line to verify, in fact the element content is also correct. It just can't update to view.
so any idea about this?
Edit:
I make use of the Stack snippet tool to show the demo, but I think localstorage can't work within the environment, so I comment off the fetch and save method.
The behavior is: click "Add New Day" button will add a new day panel like day1, day2 and go on. And click the "Add New Task" button will add a new task to the last Day panel.
With localstorage, I hope to show all Days' data with their tasks when the page loaded again.