骨干拖放-删除数据

Question

我是编程的新手，这是我第一次在这里发布文章，因此如果显示不正确，请提前抱歉。

我正在使用Backbone JS构建健康跟踪器应用程序。 我正在从Nutritionix API检索数据，并使用该数据填充屏幕左侧的视图。 我希望用户能够从填充的视图中拖动一个项目并将其放在右侧的视图中，在这种情况下，卡路里计数器将增加。 我还需要这些数据保持不变，以便当用户关闭并重新打开应用程序时，他们在视图中选择的数据将保持不变。

我已经实现了拖放功能。 我现在正在尝试使其成为这样，以便当用户将项目从左视图放到右视图中时，将创建一个仅在右视图中包含数据的集合。 我认为我需要这样做，以便可以保留数据。 现在，我无法将API数据一起传输到正确的视图中。 以下是相关的代码段：

appView：

var app = app || {};

var ENTER_KEY = 13;

app.AppView = Backbone.View.extend({
el: '#health-app',

urlRoot: 'https://api.nutritionix.com/v1_1/search/',

events: {
    'keypress': 'search',
    'click #clearBtn': 'clearFoodList',
    'drop .drop-area': 'addSelectedFood',
    // 'drop #selected-food-template': 'addSelectedFood'
},


initialize: function() {
    this.listenTo(app.ResultCollection, 'add', this.addFoodResult);
    // this.listenTo(app.SelectedCollection, 'add', this.addSelectedFood);

    app.ResultCollection.fetch();
    app.SelectedCollection.fetch();
    this.clearFoodList()
},

addFoodResult: function(resultFood) {
    var foodResult = new SearchResultView({
        model: resultFood
    });
    $('#list').append(foodResult.render().el);
},

// addSelectedFood: function(selectedFood) {
//  // var selectedFoodCollection = app.SelectedCollection.add(selectedFood)
//  console.log(app.SelectedCollection.add(selectedFood))

// },

clearFoodList: function() {
    _.invoke(app.ResultCollection.toArray(), 'destroy');
    $('#list').empty();
    return false;
},

search: function(e) {
    var food;

    //When the user searches, clear the list
    if($('#search').val() === '') {
        _.invoke(app.ResultCollection.toArray(), 'destroy');
        $('#list').empty();
    }
    //Get the nutrition information, and add to app.FoodModel
    if (e.which === ENTER_KEY) {
        this.query =  $('#search').val() + '?fields=item_name%2Citem_id%2Cbrand_name%2Cnf_calories%2Cnf_total_fat&appId=be7425dc&appKey=c7abd4497e5d3c8a1358fb6da9ec1afe';
        this.newUrl = this.urlRoot + this.query;
    var getFood = $.get(this.newUrl, function(data) {
            var hits = data.hits;
            var name, brand_name, calories, id;
            _.each(hits, function(hit){
                name = hit.fields.item_name;
                brand_name = hit.fields.brand_name;
                calories = hit.fields.nf_calories;
                id = hit.fields.item_id;

             food = new app.FoodModel({
                name: name,
                brand_name: brand_name,
                calories: calories,
                id: id
            });
             //If the food isn't in the ResultCollection, add it.
             if (!app.ResultCollection.contains(food)) {
                 app.ResultCollection.add(food);
          }
            });
            food.save();
        });

    }

}
});

早餐查看：

var app = app || {};

app.BreakfastView = Backbone.View.extend({
el: '#breakfast',

attributes: {
    'ondrop': 'ev.dataTransfer.getData("text")',
    'ondragover': 'allowDrop(event)'
},

events: {
    'dragenter': 'dragEnter',
    'dragover': 'dragOver',
    'drop': 'dropped'
},

initialize: function() {
  this.listenTo(app.SelectedCollection, 'change', this.addSelectedFood);

  },

render: function() {},

  addSelectedFood: function(selectedFood) {
   // var selectedFoodCollection = app.SelectedCollection.add(selectedFood)
  console.log(app.SelectedCollection.add(selectedFood))

 },

dragEnter: function (e) {
    e.preventDefault();
},

dragOver: function(e) {
    e.preventDefault();
},

dropped: function(ev) {
    var data = ev.originalEvent.dataTransfer.getData("text/plain");
    ev.target.appendChild(document.getElementById(data));
  // console.log(app.SelectedCollection)
  this.addSelectedFood(data);
},


});

 new app.BreakfastView

SelectedCollection:
var app = app || {};

app.SelectedCollection = Backbone.Collection.extend({
model: app.FoodModel,

localStorage: new Backbone.LocalStorage('selected-food'),
})

app.SelectedCollection = new app.SelectedCollection();

这也是我的仓库，以防万一： https : //github.com/jawaka72/health-tracker-app/tree/master/js

非常感谢您的帮助！