Я не могу удалить существующее значение 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: p.

Вы добавили 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, на самом деле в коллекции нет моделей. Вот почему вы получаете сообщение об ошибке msg 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){