我无法删除主干.js中的现有本地存储值

I'm unable to delete an existing localstorage value in backbone.js

本文关键字：存储 删除 js      更新时间：2023-09-26

作为一个个人项目，我正在主干.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();
    },

我已经对我正在做的事情做了一个小提琴：https://jsfiddle.net/brettdavis4/ynm2sse9/2/

谢谢！

我又回来了 2 :p。

您向视图添加了 2 个相同的集合。你应该坚持一个。

最初，您this.journal = new FoodJournalDay();作为您的收藏。在我之前的回答中this.journal.get(id).destroy();成功删除了该项目。但是，在新代码中，您创建了另一个集合var myNotes = new FoodJournalDay();。这是相当没有意义的，因为您已经有一个分配给this.journal的FoodJournalDay()集合。

您用fetch()填充了myNotes，因此您将this.journal留空。由于this.journal正在执行删除操作，因此它会尝试查找 id 为 this.journal.get(id) 的模型。这将返回undefined因为没有具有该id的模型，实际上集合中根本没有模型。这就是为什么你得到错误 味精 Cannot read property 'destroy' of undefined .

当某些东西不起作用时，我建议遵循程序的流程，并在任何地方放置console.log()语句，检查您的集合、模型的内容，看看您是否可以发现任何意外行为。

https://jsfiddle.net/guanzo/1mq7mdm1/

我替换了

var myNotes = new FoodJournalDay();
myNotes.fetch();
myNotes.models.forEach(function(model){

有了这个。使用原始集合。

this.journal.fetch();
this.journal.models.forEach(function(model){
相关文章：