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

我正在使用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

非常感谢您的帮助!

  ask by Jawaka72 translate from so

本文未有回复,本站智能推荐:

1回复

Phonegap不会从mongodb中删除数据(mongolab)

我已经在骨架.js中构建了一个小型phonegap应用程序,该应用程序连接到mongodb后端(托管在mongolab上),我可以使用Backbone.Collection中的以下网址成功检索并添加到集合中: 但是当我尝试从集合中删除模型时,它并没有从数据库中删除它。 我已经使用/:i
1回复

svg拖放

我有一个带有外部foreignObject的svg元素,其中包含一些div。 我希望能够拖动该对象。 唯一的问题:我无法正常工作。 我找到了几个SO答案并尝试实现它们。 但是它们都不起作用,因为我一遍又一遍地得到相同的错误: 要么 我必须从该网站上遵循以下代码(由SO
1回复

Leaflet - 如何在拖放 #2 时匹配标记和多段线(单击按钮删除最后一个标记和多段线)

我又卡住了。 放置标记并连接它们正在工作。 感谢“Falke Design”:-) 现在我想删除最后一个标记(航点),当我点击“删除最后一个航点”按钮时。 我设法做到了并且运行良好,但最后一行没有被删除。 完整代码您可以在这里找到:演示代码 此问题应在函数 delteLastWp() 行 # 218
1回复

Javascript拖放-allowdrop的延迟

我目前陷入以下问题: 我需要在发生拖移时创建一个延迟,然后检查当前的拖移对象是否仍然相同。 当它是同一个对象时->执行代码。 这是我的代码: Allowdrop功能是拖动事件。 ev.preventDefault()允许删除不能在那里发生,因为该函数是异步的。 有
1回复

javascript拖放,空容器

我的目标是清理任何div .create并删除其中的任何元素,然后再将其放入编辑链接,但我尝试过,但是不能这样做。 我有以下代码: http://codepen.io/anon/pen/Ejmemp 这是javascript: 谢谢。
1回复

拖放 - DataTransfer对象

我正在构建一个简单的拖放上传器,我想知道为什么我无法看到我在console.log(e) (DragEvent)时丢弃的文件并查看DragEvent.dataTransfer.files显示为空,但是......如果我是console.log(e.dataTransfer.files) ,它将显
1回复

理解不同的拖放参数?

我正在查看https://www.w3schools.com/html/html5_draganddrop.asp ,我想了解为什么ondragstart =“ drag(event)”有效但为什么“ drag(ev)”无效吗? `function drag(ev){ev.dataTran
2回复

与克隆拖放产生斜线

有问题的代码是在Visual Studio 2010 asp.net下直接用JavaScript编写的。 我将图形部件拖到图表上。 我使用拖动克隆。 当我单击这些图形之一时,代码将拖动克隆放置在该图形上,然后使该拖动克隆可见。 问题是, 只有我第一次尝试拖动每个拖动克隆,并且如果