我对Backbone.js很陌生。请参阅我的代码以获取此处引用的内容。我有一个视图，该视图应该显示“股票”模型的集合。该视图称为“ StockDashboardView”。此视图所需的每种股票模型都可以与“ StockDashboardItemView”一起显示。但是，在每个StockDashboardItemView呈现之前，需要分别的股票模型获取一些数据（请求股票价格），以便StockDashboardItemView可以使用该数据绘制图形。 StockDashboardView遍历每个股票模型，并为每个模型创建一个StockDashboardItemView。我应该得到5个不同的图形，每个图形中都有不同的公司数据点。但是所有图形都是相同的，这意味着5个StockDashboardItemViews中的每一个都具有相同的模型。我知道我的提取/循环逻辑是错误的，但我不知道如何或为什么。我还尝试在单个StockDashboardItemViews中而不是在StockDashboardView中进行获取（请参阅注释掉的代码）。在console.log语句中查看以下打印语句：（该集合有5个模型）。有人可以帮我纠正我的逻辑吗？谢谢
---------- 1 --------
---------- 1 --------
---------- 1 --------
---------- 1 --------
---------- 1 --------
---------- 2 --------
---------- 3 --------
---------- 2 --------
---------- 3 --------
---------- 2 --------
---------- 3 --------
---------- 2 --------
---------- 3 --------
---------- 2 --------
---------- 3 --------
window.StockDashboardView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var stocks = this.model.models;
var len = stocks.length;
var startPos = (this.options.page - 1) * 8;
var endPos = Math.min(startPos + 8, len);
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = startPos; i < endPos; i++) {
console.log("----------1--------");
var stock = stocks[i];
stock.set("_id", stocks[i].toJSON()["tickerSymbol"]);
stock.fetch({success: function(model, response, options){
stock.set("data", response);
// set interactivity to false
console.log("-----------2---------");
$('.thumbnails', this.el).append(new StockDashboardItemView({model: stock}).render().el);
}});
}
$(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);
return this;
}
});
window.StockDashboardItemView = Backbone.View.extend({
tagName: "li",
initialize: function () {
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
var context = this.$("#chart_div")[0];
var stock = this.model;
stock.set("_id", stock.toJSON()["tickerSymbol"]);
//stock.fetch({success: function(model, response, options){
//stock.set("data", response);
// set interactivity to false
console.log("-----------3---------");
var chart = new TFChart(stock.get("_id"), stock.attributes['data'], context, false, this.$("#chart_div").width(), this.$("#chart_div").height());
return this;
//}});
}
});
最佳答案
在for-loop中，您使用stock = stocks[i]来获取每张股票，然后取回它们。
但是，由于.fetch是async方法，当它开始执行以呈现库存视图时，您会注意到库存现在指向库存中的最后一项，因此它只渲染了库存的最后一项。很多次。
为什么会这样？因为var使用函数作用域，而不是块作用域（在ES6中，有一个let可以使用块作用域，但此处有点偏离主题），因此所有.fetch的成功回调在它们要使用stock，他们都看到相同的stock，这将是for循环中的最后一个赋值，并且应该是股票的最后一项。
这是一个范围问题，解决方案是将上下文包装到一个函数中，因此该函数的范围将为您保留该项目：
render: function () {
var stocks = this.model.models;
var len = stocks.length;
var startPos = (this.options.page - 1) * 8;
var endPos = Math.min(startPos + 8, len);
// Move this.el to here, so the this.el's this won't be a problem.
var thisEl = this.el;
var fetchStock = function(stock) {
stock.set("_id", stocks[i].toJSON()["tickerSymbol"]);
stock.fetch({success: function(model, response, options){
stock.set("data", response);
// set interactivity to false
console.log("-----------2---------");
$('.thumbnails', thisEl).append(new StockDashboardItemView({model: stock}).render().el);
}});
};
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = startPos; i < endPos; i++) {
console.log("----------1--------");
fetchStock(stocks[i]);
}
$(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);
return this;
}
如您所见，现在当我们调用
fetchStock时，它的stock将引用当前的stocks[i]，并且不会受到其后的循环的影响。关于javascript - Backbone ListView /渲染 ListView 项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31378015/