Javascript 主干添加事件触发两到三次
每次我向视图中添加一个项目时，我的添加事件都会触发两次，然后对添加的第二个项目触发三次，依此类推。我不确定这是否与僵尸视图有关。如果是，我真的不知道在哪里调用close/remove函数。我正在为每个Javascript 主干添加事件触发两到三次,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,每次我向视图中添加一个项目时，我的添加事件都会触发两次，然后对添加的第二个项目触发三次，依此类推。我不确定这是否与僵尸视图有关。如果是，我真的不知道在哪里调用close/remove函数。我正在为每个model\u数据值创建一个新的firebase url集合。当model_数据值发生变化时，除了能够添加和删除项目外，还必须显示相应的数据 我的代码如下： /*global Backbone */ var app = app || {}; (function($) { app.App
model\u数据model_数据/*global Backbone */
var app = app || {};
(function($) {
app.AppView = Backbone.View.extend({
el: '#healthtracker',
template: _.template($('#total-calorie-template').html()),
initialize: function() {
console.log("inside initialize");
var self = this;
this.model_date;
this.input = this.$('#user-input');
this.servings = $("#servings");
this.total_calories = 0;
this.records;
this.list = $("#foodRecords");
this.model_date = $('#date').val();
this.dateUrl = "https://xxxxxxxxxxx.firebaseio.com/" + this.model_date;
app.foodCollection = new app.FoodCollection([], { url: this.dateUrl });
this.listenTo(app.foodCollection, 'add', this.addOne);
},
events: {
'click #add-food': 'renderFood',
'keyup #user-input': 'autoSearch',
'change #date': 'newList'
},
autoSearch: function() {
console.log("inside autosearch");
$("#user-input").autocomplete({
delay: 100,
source: function(request, response) {
// Suggest URL
var suggestURL = "https://api.nutritionix.com/v1_1/search/%QUERY?results=0:10&fields=item_name,brand_name,item_id,nf_calories&appId=41324021&appKey=b16be109bec67fb1282c4b4559e8666f";
suggestURL = suggestURL.replace('%QUERY', request.term);
// JSONP Request
$.ajax({
method: 'GET',
dataType: 'json',
url: suggestURL,
data: JSON.stringify({
item_name: "",
brand_name: "",
item_id: "",
calories: ""
}),
success: function(data) {
if (data.hits.length != 0) {
for (i = 0; i < data.hits.length; i++) {
response($.map(data.hits, function(item) {
return {
value: item.fields.item_name,
item_name: item.fields.item_name,
item_id: item.fields.item_id,
brand_name: item.fields.brand_name,
calories: item.fields.nf_calories
}
}));
}
} else {
response([]);
}
},
error: function() {
alert("Oops, something went wrong!");
},
})
},
select: function(event, ui) {
records = ui.item;
}
});
},
newList: function() {
this.list.html("");
console.log("inside newList");
this.model_date = $('#date').val();
this.dateUrl = "https://fiery-inferno-4707.firebaseio.com/" + this.model_date;
app.foodCollection = new app.FoodCollection([], { url: this.dateUrl });
//for each of those filtered items
app.foodCollection.each(function(food) {
var view = new app.FoodRecords({ model: food });
this.list.append(view.render().el);
});
return this;
},
renderFood: function() {
console.log("inside renderFood");
app.foodCollection.create(this.newAttributes());
this.input.val('');
},
addOne: function(food) {
console.log("inside addOne");
console.log(food);
//$('#foodRecords').html('');
var view = new app.FoodRecords({ model: food });
this.list.append(view.render().el);
},
newAttributes: function() {
console.log("inside newAttributes");
return {
item_name: records.item_name,
brand_name: records.brand_name,
calories: records.calories,
item_id: records.item_id,
servings: this.servings.val(),
date: this.model_date
}
},
});
})(jQuery);
/*全球主干网*/
var-app=app |{}；
（函数（$）{
app.AppView=Backbone.View.extend({
el:“#healthtracker”，
模板：35;.template（$（'#总热量模板'）.html（）），
初始化：函数（）{
日志（“内部初始化”）；
var self=这个；
此.model_日期；
this.input=this.$（“#用户输入”）；
this.servings=$（“#servings”）；
总热量=0；
这是一个记录；
this.list=$（“#食品记录”）；
this.model_date=$（'#date'）.val（）；
this.dateUrl=”https://xxxxxxxxxxx.firebaseio.com/“+此.model_日期；
app.foodCollection=new app.foodCollection（[]，{url:this.dateUrl}）；
this.listenTo（app.foodCollection'add'，this.addOne）；
},
活动：{
'单击#添加食物'：'渲染食物'，
“键控#用户输入”：“自动搜索”，
“更改日期”：“新列表”
},
自动搜索：函数（）{
console.log（“内部自动搜索”）；
$（“#用户输入”）。自动完成({
延误：100，
来源：功能（请求、响应）{
//建议URL
var suggestURL=”https://api.nutritionix.com/v1_1/search/%QUERY?results=0:10&fields=item_name，品牌名称，项目id，nf_卡路里和appId=41324021和appKey=b16be109bec67fb1282c4b4559e8666f”；
suggestURL=suggestURL.replace（“%QUERY”，request.term）；
//JSONP请求
$.ajax({
方法：“GET”，
数据类型：“json”，
url:suggestURL，
数据：JSON.stringify({
项目名称：“，
品牌名称：“，
项目id:“”，
卡路里：“
}),
成功：功能（数据）{
如果（data.hits.length！=0）{
对于（i=0；iaddOnerenderFoodnewList（）newAttributes记录是否未定义？app.FoodRecords
的内容是什么。。？尝试用最少的代码创建一个复制问题的。