Я не могу удалить существующее значение localstorage в backbone.js

Question

В качестве личного проекта я работаю над калькулятором питания в 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();
    },

Я подумала над тем, над чем работаю: https://jsfiddle.net/brettdavis4/ynm2sse9/2/

Спасибо!

Answer 1

Я вернулся на второй раунд: с.

Вы добавили 2 одинаковых коллекции для просмотра. Вы должны придерживаться одного.

Первоначально у вас было this.journal = new FoodJournalDay(); как ваша коллекция. И в моем предыдущем ответе this.journal.get(id).destroy(); успешно удалил элемент. Однако в своем новом коде вы создали другую коллекцию var myNotes = new FoodJournalDay();, Это довольно бессмысленно, потому что у вас уже есть FoodJournalDay() коллекция назначена this.journal,

Вы заселились myNotes с fetch()Таким образом, вы оставили this.journal пустой. поскольку this.journal делает удаление, пытается найти модель с идентификатором 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){