Question

在Backbone应用程序中，我需要使用localstorage来保存一些历史数据。当应用程序第二次加载时，历史数据将被加载到页面
而应用程序仍然是ToDo任务应用程序，差异，我想支持多天的记录。

所以我的应用程序的数据结构如下：一个集合（DayCollection）和集合模型（Daymodel）。这里我使用骨干关系扩展来支持嵌套关系，还有第二个模型（Todo）。而Daymodel和Todo有很多关系。

＆＃13;

// 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();
});

＆＃13;

<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>

＆＃13;

我删除了非商业代码，只显示相关代码。为了便于阅读帖子。

使用AppView调用

DayCollection，DayView每天都会为此工作（对于每个待办事项，还有另一个视图，我没有把它放在这里）。

当前状态为：localstorage数据正确（我使用调试方法验证），日级视图可以正常工作。问题是，每天的待办事项任务都无法提取到页面。

实际上我使用console.log(this.$("ul").html());这一行来验证，实际上元素内容也是正确的。它无法更新以查看。

所以对此有任何想法吗？

编辑：我使用Stack片段工具来显示演示，但我认为localstorage不能在环境中工作，所以我评论了fetch和save方法。

行为是：点击＆＃34;添加新的一天＆＃34;按钮将添加一个新的日期面板，如day1，day2，然后继续。然后点击＆＃34;添加新任务＆＃34;按钮将向最后一天面板添加新任务。

通过本地存储，我希望展示所有的日子。当页面再次加载时，数据及其任务。

Backbone：虽然元素内容正确，但fetch方法无法更新视图

0 个答案: