我无法删除 backbone.js 中的现有本地存储值
I'm unable to delete an existing localstorage value in backbone.js
作为个人项目,我正在 backbone.js 开发食物计算器。我正在通过 backbone.localstorage.js 存储食物条目。我的大部分工作正常。我遇到的唯一问题是在我保存我的项目并点击刷新后,我无法删除这些项目。如果我添加一个项目,我删除后可以直接删除。
这是我初始化所有内容的函数:
initialize: function () {
this.model = new SearchList();
this.foods = new AllFoods();
this.journal = new FoodJournalDay();
this.prepCollection = _.debounce(this.prepCollection, 1000);
this.$totalcal = $('#totalcal span');
this.$totalcalfat = $('#totalcalfat span');
this.$totalprotein = $('#totalprotein span');
this.$totalcarb = $('#totalcarb span');
this.$totalfat = $('#totalfat span');
this.$totalsugar = $('#totalsugar span');
this.$totalsodium = $('#totalsodium span');
this.$totalpotassium = $('#totalpotassium span');
this.$list = $('#listing');
this.$breakfast = $('#breakfast');
this.$lunch = $('#lunch');
this.$dinner = $('#dinner');
this.$snack = $('#snack');
this.$tracked = $('#tracked');
this.listenTo(this.journal, 'all', _.debounce(this.render, 0));
this.model.on('destroy', this.remove, this);
this.listenTo(this.journal, 'destroy', this.renderfoods);
this.foods.fetch();
var myNotes = new FoodJournalDay();
myNotes.fetch();
myNotes.models.forEach(function(model){
var mealli = model.get("html");
var calcount = parseFloat(model.get("calories"));
var proteincount = parseFloat(model.get("protein"));
var carbscount = parseFloat(model.get("carbs"));
var fatcount = parseFloat(model.get("fat"));
var sugarcount = parseFloat(model.get("sugar"));
totalcal += calcount;
totalprotein += proteincount;
totalcarb += carbscount;
totalfat += fatcount;
totalsugar += sugarcount;
switch (model.get("meal")) {
case 'Breakfast':
$('#breakfast').append(mealli);
break;
case 'Lunch':
$('#lunch').append(mealli);
break;
case 'Dinner':
$('#dinner').append(mealli);
break;
case 'Snack':
$('#snack').append(mealli);
break;
default:
//alert("Please select a meal!");
}
$('#totalcal span').html(totalcal);
$('#totalprotein span').html(totalprotein);
$('#totalcarb span').html(totalcarb);
$('#totalfat span').html(totalfat);
$('#totalsugar span').html(totalsugar);
});
},
这是我的删除函数:
destroy: function (e) {
var $li = $(e.currentTarget).closest('li');
var id = $li.attr('data-id');
$li.remove();
console.log("li id: " + id);
console.log(this.journal);
this.journal.get(id).destroy();
},
我已经 fiddle 我正在做的事情:
https://jsfiddle.net/brettdavis4/ynm2sse9/2/
谢谢!
我回来参加第 2 轮 :p.
您向视图添加了 2 个相同的 collection。你应该坚持使用一个。
最初你有 this.journal = new FoodJournalDay();
作为你的 collection。在我之前的回答中 this.journal.get(id).destroy();
成功删除了该项目。然而,在您的新代码中,您创建了另一个 collection var myNotes = new FoodJournalDay();
。这是毫无意义的,因为您已经将 FoodJournalDay()
collection 分配给了 this.journal
。
您使用 fetch()
填充了 myNotes
,因此您将 this.journal
留空。由于 this.journal
正在进行删除,它会尝试查找 ID 为 this.journal.get(id)
的模型。这个returnsundefined
既然没有那个id
的模型,其实collection根本就没有模型。这就是您收到错误消息 Cannot read property 'destroy' of undefined
的原因。
当某些东西不工作时,我建议遵循程序的流程并在各处放置 console.log()
语句检查你的 collection、模型的内容,看看你是否能找到任何意外行为。
https://jsfiddle.net/guanzo/1mq7mdm1/
我换了
var myNotes = new FoodJournalDay();
myNotes.fetch();
myNotes.models.forEach(function(model){
有了这个。使用原来的collection.
this.journal.fetch();
this.journal.models.forEach(function(model){
作为个人项目,我正在 backbone.js 开发食物计算器。我正在通过 backbone.localstorage.js 存储食物条目。我的大部分工作正常。我遇到的唯一问题是在我保存我的项目并点击刷新后,我无法删除这些项目。如果我添加一个项目,我删除后可以直接删除。
这是我初始化所有内容的函数:
initialize: function () {
this.model = new SearchList();
this.foods = new AllFoods();
this.journal = new FoodJournalDay();
this.prepCollection = _.debounce(this.prepCollection, 1000);
this.$totalcal = $('#totalcal span');
this.$totalcalfat = $('#totalcalfat span');
this.$totalprotein = $('#totalprotein span');
this.$totalcarb = $('#totalcarb span');
this.$totalfat = $('#totalfat span');
this.$totalsugar = $('#totalsugar span');
this.$totalsodium = $('#totalsodium span');
this.$totalpotassium = $('#totalpotassium span');
this.$list = $('#listing');
this.$breakfast = $('#breakfast');
this.$lunch = $('#lunch');
this.$dinner = $('#dinner');
this.$snack = $('#snack');
this.$tracked = $('#tracked');
this.listenTo(this.journal, 'all', _.debounce(this.render, 0));
this.model.on('destroy', this.remove, this);
this.listenTo(this.journal, 'destroy', this.renderfoods);
this.foods.fetch();
var myNotes = new FoodJournalDay();
myNotes.fetch();
myNotes.models.forEach(function(model){
var mealli = model.get("html");
var calcount = parseFloat(model.get("calories"));
var proteincount = parseFloat(model.get("protein"));
var carbscount = parseFloat(model.get("carbs"));
var fatcount = parseFloat(model.get("fat"));
var sugarcount = parseFloat(model.get("sugar"));
totalcal += calcount;
totalprotein += proteincount;
totalcarb += carbscount;
totalfat += fatcount;
totalsugar += sugarcount;
switch (model.get("meal")) {
case 'Breakfast':
$('#breakfast').append(mealli);
break;
case 'Lunch':
$('#lunch').append(mealli);
break;
case 'Dinner':
$('#dinner').append(mealli);
break;
case 'Snack':
$('#snack').append(mealli);
break;
default:
//alert("Please select a meal!");
}
$('#totalcal span').html(totalcal);
$('#totalprotein span').html(totalprotein);
$('#totalcarb span').html(totalcarb);
$('#totalfat span').html(totalfat);
$('#totalsugar span').html(totalsugar);
});
},
这是我的删除函数:
destroy: function (e) {
var $li = $(e.currentTarget).closest('li');
var id = $li.attr('data-id');
$li.remove();
console.log("li id: " + id);
console.log(this.journal);
this.journal.get(id).destroy();
},
我已经 fiddle 我正在做的事情: https://jsfiddle.net/brettdavis4/ynm2sse9/2/
谢谢!
我回来参加第 2 轮 :p.
您向视图添加了 2 个相同的 collection。你应该坚持使用一个。
最初你有 this.journal = new FoodJournalDay();
作为你的 collection。在我之前的回答中 this.journal.get(id).destroy();
成功删除了该项目。然而,在您的新代码中,您创建了另一个 collection var myNotes = new FoodJournalDay();
。这是毫无意义的,因为您已经将 FoodJournalDay()
collection 分配给了 this.journal
。
您使用 fetch()
填充了 myNotes
,因此您将 this.journal
留空。由于 this.journal
正在进行删除,它会尝试查找 ID 为 this.journal.get(id)
的模型。这个returnsundefined
既然没有那个id
的模型,其实collection根本就没有模型。这就是您收到错误消息 Cannot read property 'destroy' of undefined
的原因。
当某些东西不工作时,我建议遵循程序的流程并在各处放置 console.log()
语句检查你的 collection、模型的内容,看看你是否能找到任何意外行为。
https://jsfiddle.net/guanzo/1mq7mdm1/
我换了
var myNotes = new FoodJournalDay();
myNotes.fetch();
myNotes.models.forEach(function(model){
有了这个。使用原来的collection.
this.journal.fetch();
this.journal.models.forEach(function(model){