Javascript Backbone.js：分别填充集合

我正在Backbone.js中进行一个项目，我从一个食品API获得结果，然后显示它们。我可以从结果列表中单击一个项目，并能够保存该结果，将其显示在页面右侧的食品跟踪列表中

食品跟踪列表显示了有关食品的信息（食品名称、品牌和卡路里）以及所有跟踪食品的卡路里总量

当你点击“添加到膳食”按钮时，应用程序也应该能够工作

我的代码的新实现旨在持久存储和收集每顿饭的总热量，为每顿饭创建一个单独的收集

我认为这样可以让每顿饭的每一个集合都单独填充，并且每个集合都可以增加热量。但是，当我单击搜索结果列表中的某个项目时，该项目会附加到所有膳食和跟踪食品列表中，而不仅仅是跟踪食品列表

我尝试过提供的解决方案，但我不知道如何创建多个firebase URL，并在internet上搜索了这些信息

“添加到膳食”功能也有一个错误，因为我正在尝试在addClicked函数中删除并添加一个类

这是一个

$（函数（）{
var Food=Backbone.Model.extend({
默认值：{
标题：“未找到任何信息”，
品牌：“未找到任何信息”，
卡路里：“未找到任何信息”，
戴伊：“全部”
}
});
var AllFoods=Backbone.Firebase.Collection.extend({
型号：食品，
url:“https://blinding-torch-8751.firebaseio.com/"
});
var早餐=Backbone.Firebase.Collection.extend({
型号：食品，
url:“https://blinding-torch-8751.firebaseio.com/"
});
var=Backbone.Firebase.Collection.extend({
型号：食品，
url:“https://blinding-torch-8751.firebaseio.com/"
});
var=Backbone.Firebase.Collection.extend({
型号：食品，
url:“https://blinding-torch-8751.firebaseio.com/"
});
var Snack=Backbone.Firebase.Collection.extend({
型号：食品，
url:“https://blinding-torch-8751.firebaseio.com/"
});
var SearchList=Backbone.Collection.extend({
初始化：函数（）{
此.bind（“重置”，函数（模型、选项）{
控制台日志（“内部事件”）；
console.log（模型）；
});
},
//**1.函数“parse”是正确解析响应的主干函数
解析：函数（响应）{
//**返回数组时，返回数组命中内部响应
//**我们让Backone填充此集合
返回response.hits；
}
});
var App=Backbone.View.extend({
el:‘身体’，
活动：{
“输入#搜索框”：“预收集”，
“单击#列出李”：“跟踪”，
“点击添加”：“点击添加”，
“单击#删除”：“删除已单击”
},
初始化：函数（）{
this.model=新的搜索列表（）；
this.foods=新的AllFoods（）；
this.breakfastlist=新早餐（）；
this.午餐列表=新午餐（）；
this.dinnerlist=新晚餐（）；
this.snacklist=新零食（）；
this.prepCollection=u.debounce（this.prepCollection，1000）；
这个.$total=$（“#total span”）；
这个.$list=$（“#列表”）；
这个.$instruct=$（'#instruct'）；
这个.$tracked=$（“#tracked”）；
this.listeno（this.foods，'add'，this.rendertracked）；
this.listenTo（this.foods，'remove'，this.rendertracked）；
this.listenTo（this.breakfastlist'add'，this.renderbreakfast）；
this.listenTo（this.breakfastlist'remove'，this.renderbreakfast）；
this.listenTo（this.午餐列表，'add'，this.renderlunch）；
this.listenTo（this.午餐列表，'remove'，this.renderlunch）；
this.listenTo（this.dinner列表'add'，this.renderdinner）；
this.listenTo（this.dinner列表'remove'，this.renderdinner）；
this.listenTo（this.snacklist'add'，this.rendersnack）；
this.listenTo（this.snacklist'remove'，this.rendersnack）；
},
addClicked：函数（e）{
var$target=$（e.currentTarget）.parent（）；
var$selected=$target.find（'#mySelect'）.val（）；
var mealClass=$target.attr（'class'）；
变量位置=$target.attr（'data-id'）；
var currentFood=this.foods.get（位置）；
var currenthtml=currentFood.get（'html'）；
//替换类，以便以后使用它专门针对特定膳食集合中的项目
currenthtml.removeClass（'alltracked'）.addClass（$selected）；
交换机（$selected）{
案例“早餐”：
此.breakfastlist.create（currentFood）；
打破
“午餐”案例：
创建（currentFood）；
打破
“晚餐”案例：
this.dinnerlist.create（currentFood）
打破
“零食”案例：
此.snacklist.create（currentFood）
打破
违约：
警报（“错误：重试”）；
}
},
removeClicked:函数（e）{
var$target=$（e.currentTarget）.parent（）；
var removeid=$target.attr（'data-id'）；
$target.remove（）；
var modelRemoved=this.foods.get（removeid）；
var addedClass=$target.attr（'class'）；
这个。食品。移除（模型移除）；
//使用添加的类从正确的集合中删除
开关（附加类）{
案例'Bre
$(function() {

    var Food = Backbone.Model.extend({

        defaults: {
            title: 'no information found',
            brand: 'no information found',
            calories: 'no information found',
            day: 'all'
        }
    });

    var AllFoods = Backbone.Firebase.Collection.extend({
        model: Food,
        url: "https://blinding-torch-8751.firebaseio.com/"

    });
    var Breakfast = Backbone.Firebase.Collection.extend({
        model: Food,
        url: "https://blinding-torch-8751.firebaseio.com/"

    });
    var Lunch = Backbone.Firebase.Collection.extend({
        model: Food,
        url: "https://blinding-torch-8751.firebaseio.com/"

    });
    var Dinner = Backbone.Firebase.Collection.extend({
        model: Food,
        url: "https://blinding-torch-8751.firebaseio.com/"

    });
    var Snack = Backbone.Firebase.Collection.extend({
        model: Food,
        url: "https://blinding-torch-8751.firebaseio.com/"

    });



    var SearchList = Backbone.Collection.extend({

        initialize: function() {
            this.bind("reset", function(model, options) {
                console.log("Inside event");
                console.log(model);
            });
        },

        //** 1. Function "parse" is a Backbone function to parse the response properly
        parse: function(response) {
            //** return the array hits inside response, when returning the array
            //** we let Backone populate this collection
            return response.hits;
        }

    });


    var App = Backbone.View.extend({

        el: 'body',

        events: {
            "input #searchBox": "prepCollection",
            "click #listing li": "track",
            "click #add": "addClicked",
            "click #remove": "removeClicked"

        },

        initialize: function() {

            this.model = new SearchList();
            this.foods = new AllFoods();
            this.breakfastlist = new Breakfast();
            this.lunchlist = new Lunch();
            this.dinnerlist = new Dinner();
            this.snacklist = new Snack();
            this.prepCollection = _.debounce(this.prepCollection, 1000);
            this.$total = $('#total span');
            this.$list = $('#listing');
            this.$instruct = $('#instruct');
            this.$tracked = $('#tracked');
            this.listenTo(this.foods, 'add', this.rendertracked);
            this.listenTo(this.foods, 'remove', this.rendertracked);
            this.listenTo(this.breakfastlist, 'add', this.renderbreakfast);
            this.listenTo(this.breakfastlist, 'remove', this.renderbreakfast);
            this.listenTo(this.lunchlist, 'add', this.renderlunch);
            this.listenTo(this.lunchlist, 'remove', this.renderlunch);
            this.listenTo(this.dinnerlist, 'add', this.renderdinner);
            this.listenTo(this.dinnerlist, 'remove', this.renderdinner);
            this.listenTo(this.snacklist, 'add', this.rendersnack);
            this.listenTo(this.snacklist, 'remove', this.rendersnack);

        },

        addClicked: function(e) {
            var $target = $(e.currentTarget).parent();
            var $selected = $target.find('#mySelect').val();
            var mealClass= $target.attr('class');
            var location = $target.attr('data-id');
            var currentFood = this.foods.get(location);
            var currenthtml = currentFood.get('html');

            //replaces class in order to use it later to specifically target items in a specific meal collection
            currenthtml.removeClass('alltracked').addClass($selected);

            switch ($selected) {
                case 'Breakfast':
                    this.breakfastlist.create(currentFood);
                    break;
                case 'Lunch':
                    this.lunchlist.create(currentFood);
                    break;
                case 'Dinner':
                    this.dinnerlist.create(currentFood)
                    break;
                case 'Snack':
                    this.snacklist.create(currentFood)
                    break;
                default:
                    alert("Error: try again");

            }



        },

        removeClicked: function(e) {
            var $target = $(e.currentTarget).parent();
            var removeid = $target.attr('data-id');
            $target.remove();
            var modelRemoved = this.foods.get(removeid);
            var addedClass = $target.attr('class');
            this.foods.remove(modelRemoved);

            //uses the added class to remove from the correct collection
            switch (addedClass) {
                case 'Breakfast':
                   this.breakfastlist.remove(modelRemoved);
                   break;
                case 'Lunch':
                    this.lunchlist.remove(modelRemoved);
                    break;
                case 'Dinner':
                    this.dinnerlist.remove(modelRemoved);
                    break;
                case 'Snack':
                    this.snacklist.remove(modelRemoved);
                    break;

            }
        },

        prepCollection: function() {
            var name = $('input').val();
            var newUrl = "https://api.nutritionix.com/v1_1/search/" + name + "?results=0%3A20&cal_min=0&cal_max=50000&fields=item_name,brand_name,item_id,nf_calories&appId=26952a04&appKey=33b9262901d0068d4895736b5af19805";

            if (name == "") {
                this.$list.html("")
                this.$instruct.html("")
            } else {
                this.$instruct.html("Click On A Food Item To Track It");
                this.model.url = newUrl;
                this.model.fetch({
                    success: function(response, xhr) {
                        console.log("Inside success");
                        console.log(response.toJSON());
                    },
                    error: function(errorResponse) {
                        console.log(errorResponse)
                    }
                });
                this.listenTo(this.model, 'sync', this.render);
            }

        },

        track: function(e) {

            var $target = $(e.currentTarget);
            var item_name = $target.attr('data-name');
            var brand_name = $target.attr('data-brand');
            var calorieString = $target.attr('data-calories');
            var calorieAmt = parseFloat(calorieString);
            var foodid = $target.attr('data-id');

            var chooseday = '<form>What meal was this part of?: <select id="mySelect"> <option value="Breakfast">Breakfast</option><option value="Lunch">Lunch</option><option value="Dinner">Dinner</option><option value="Snack">Snack</option></select></form><button id="add" type="button">Add To Meal</button><button id="remove" type="button">Remove From Tracked</button>';

            var trackedhtml = '<li' + ' data-id=' + '"' + foodid + '"' + ' class="alltracked">' + "<strong>" + item_name + '</strong>' + ' (' + brand_name + ')' + ' - ' + calorieAmt + ' Calories' + chooseday + '</li>'


            this.foods.create(new Food({
                id: foodid,
                title: item_name,
                brand: brand_name,
                calories: calorieAmt,
                html: trackedhtml
            }));

        },

        rendertracked: function() {
            var total = 0;
            var trackedhtml = '';

            this.foods.each(function(food) {
                trackedhtml = trackedhtml + food.get('html');
                total += food.get('calories');
            }, this)
            this.$tracked.html(trackedhtml);
            this.$total.html(total);

        },
        renderbreakfast: function(){
            var total = 0;
            var breakfasthtml = '';

            this.breakfastlist.each(function(dish) {
                breakfasthtml = breakfasthtml + dish.get('html');
                total += dish.get('calories');
            }, this)
            $('#breakfast').html(breakfasthtml);
            $('#totalbreak').html(total);


        },
        renderlunch: function(){
            var total = 0;
            var lunchtml = '';

            this.lunchlist.each(function(dish) {
                lunchtml = lunchtml + dish.get('html');
                total += dish.get('calories');
            }, this)
            $('#lunch').html(lunchtml);
            $('#totalunch').html(total);
        },
        renderdinner: function(){
            var total = 0;
            var dinnerhtml = '';

            this.dinnerlist.each(function(dish) {
                dinnerhtml = dinnerhtml + dish.get('html');
                total += dish.get('calories');
            }, this)
            $('#dinner').html(dinnerhtml);
            $('#totaldinner').html(total);
        },
        rendersnack: function(){
            var total = 0;
            var snackhtml = '';

            this.snacklist.each(function(dish) {
                snackhtml = snackhtml + dish.get('html');
                total += dish.get('calories');
            }, this)
            $('#snack').html(snackhtml);
            $('#totalsnack').html(total);
        },

        render: function() {
            var terms = this.model;
            var wordhtml = '';
            terms.each(function(term) {
                wordhtml = wordhtml + '<li' + ' data-id=' + '"' + term.get('_id') + '"' + ' data-name=' + '"' + term.get('fields')['item_name'] + '"' + ' data-brand=' + '"' + term.get('fields')['brand_name'] + '"' + ' data-calories=' + '"' + term.get('fields')['nf_calories'] + '"' + '>' + "<strong>" + term.get('fields')["item_name"] + '</strong>' + ' (' + term.get('fields')["brand_name"] + ')' + ' - ' + term.get('fields')["nf_calories"] + ' Calories' + '</li>'
            }, this);
            this.$list.html(wordhtml);

        }
    });
    var app = new App();
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Food Guide App</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <div class="text-center bg-black">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Interactive Food Guide</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <h2>Food Search</h2>
                    <img class="img-responsive" src="img/my-food-guide-plate.jpg" alt="food plate photo">
                    <a name="foodsearch"></a>
                    <h4>Look up food here:</h4>
                    <input type="text" id="searchBox"> <br/><br/>
                    <p id="instruct"></p>
                    <ul class="spacefood" id="listing"></ul>
                    <a href="#foodtrack">Go to food tracking</a>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
                <div class="col-sm-6 top-space bottom-space">
                    <img class="img-responsive" src="img/foods.jpg" alt="foods">
                    <a name="foodtrack"></a>
                    <h2>Foods Tracked</h2>
                    <ul class="top-space spacetracked" id="tracked"></ul>
                    <p id="total"><strong> total calories:</strong> <span>0</span></p>
                    <a href="#foodsearch">Go to food search</a>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <a name="breakfastrack"></a>
                    <h1>Breakfast</h1>
                    <ul class="spacetracked" id="breakfast"></ul>
                    <p id="totalbreak"><strong> total calories:</strong> <span>0</span></p>
                    <a href="#foodsearch">Return to food search</a>
                    <p><a href="#foodtrack">Return to food tracking</a></p>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
                <div class="col-sm-6">
                    <img class="img-responsive" src="img/breakfast-meal.jpg" alt="breakfast plate photo">
                </div>
            </div>
        </div>
    </div>

    <div class="bg-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <a name="lunchtrack"></a>
                    <h1>Lunch</h1>
                    <ul class="spacetracked" id="lunch"></ul>
                    <p id="totalunch"><strong> total calories:</strong> <span>0</span></p>
                    <a href="#foodsearch">Return to food search</a>
                    <p><a href="#foodtrack">Return to food tracking</a></p>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
                <div class="col-sm-6">
                    <img class="img-responsive" src="img/lunch-meal.jpg" alt="lunch plate photo">
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <a name="dinnertrack"></a>
                    <h1>Dinner</h1>
                    <ul class="spacetracked" id="dinner"></ul>
                    <p id="totaldinner"><strong> total calories:</strong> <span>0</span></p>
                    <a href="#foodsearch">Return to food search</a>
                    <p><a href="#foodtrack">Return to food tracking</a></p>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
                <div class="col-sm-6">
                    <img class="img-responsive" src="img/dinner-meal.jpg" alt="dinner plate photo">
                </div>
            </div>
        </div>
    </div>

    <div class="bg-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <a name="snacktrack"></a>
                    <h1>Snack</h1>
                    <ul class="spacetracked" id="snack"></ul>
                    <p id="totalsnack"><strong> total calories:</strong> <span>0</span></p>
                    <a href="#foodsearch">Return to food search</a>
                    <p><a href="#foodtrack">Return to food tracking</a></p>
                    <p>
                        Go to:
                        <a href="#breakfastrack">Breakfast</a>&nbsp; &nbsp;
                        <a href="#lunchtrack">Lunch</a> &nbsp; &nbsp;
                        <a href="#dinnertrack">Dinner</a>&nbsp; &nbsp;
                        <a href="#snacktrack">Snack</a>&nbsp; &nbsp;
                    </p>
                </div>
                <div class="col-sm-6">
                    <img class="img-responsive" src="img/snack-meal.jpg" alt="snack plate photo">
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Backbone and Underscore -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
    <!-- apps functionality -->
    <script src="js/app.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
    <!-- BackboneFire -->
    <script src="https://cdn.firebase.com/libs/backbonefire/0.5.1/backbonefire.min.js"></script>
  </body>
</html>

var Foods = Backbone.Firebase.Collection.extend({
    model: Food,
    url: "https://blinding-torch-8751.firebaseio.com/foods",
});

var Breakfast = Backbone.Firebase.Collection.extend({
    model: Food,
    url: "https://blinding-torch-8751.firebaseio.com/breakfasts",
});

this.foods.create({
  id: foodid,
  title: item_name,
});