页面刷新获取/重载多次 [英] Page getting refreshed/reloaded many times
问题描述
我学习JavaScript和Backbone.js的，并试图开发一个小小的Web应用程序。
但问题是，我的网页（图）被越来越重载多次（超过预期）。该页面获得稳定的显示图形之前，所以，网页会自动重新加载多少次（超快速）。当我说浏览器刷新我的意思是说谷歌浏览器刷新图标的重新加载图标刷新/（做正向旋转，向后旋转）很多次，最后得到的数据显示。
I am learning JavaScript and backbone.js and trying to develop one small web app. But the problem is that my page (graph) is getting reloaded many times (more than expected). So page automatically reloads many times (super fast) before the page gets stable and graph is displayed. When I say "Reload of browser" I mean to say the reload icon of google chrome refresh icon refreshes/ (does forward rotation, back rotation) many times and finally the data gets displayed.
下面是什么，我都试过到目前为止短版。由于我在学习阶段，我可能不这样做正确的编码标准。和我一起承担了。
Below is short version of what I have tried till now. Since I am in the learning phase, I might not have made correct coding standard. Bear with me on that.
所以，我必须显示在头版一个图表（后来我需要添加在同一页面上多图）。为图中的数据是从REST服务来
So, I have to display one graph on the front page (Later I need to add more graphs on the same page). The data for the graph is coming from REST Service.
HTML：
我有一个锚，一个模板来显示图形数据。
I have one anchor, and one template to display the graph data.
<div id ="chartAnchor1"></div>
<script id="myChart-template" type="text/template">
<canvas id="lineChart"></canvas>
</script>
视图模型
这是图的具体数据：
var firstSubViewModel = Backbone.View.extend({
template: _.template($('#myChart-template').html()),
events: {
'click .Refresh': 'fetchModelData'
},
fetchModelData: function() {
this.model.initialize();
},
render: function()
{
$(this.el).html(this.template());
var ctx = $(this.el).find('#lineChart')[0];
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
data: this.model.attributes.incThisYear
}, {
data: this.model.attributes.incLastYear
}]
},
labelString: 'Income in $'
}
}]
}
}
});
},
initialize: function() {
_.bindAll(this, "fetchModelData");
this.model.on('change', this.render, this);
}
});
return firstSubViewModel;
});
控制器：
var ch = new dashboardModel.chart({});
if (// some condition) {
var data = { // some data};
ch.fetch(data)
}
//Main Graph on Dashboard
new firstSubViewModel({
el: '#chartAnchor1',
model: ch
});
});
型号：
我有一个从REST服务。
Model: I have one model class which gets the data from REST Service.
问题：网页获得一些刷新5-6次，最后得到图加载完美
Question: Page is getting refreshed some 5-6 times and finally graph gets loaded perfectly.
注脚：有没有在我的渲染功能的任何问题。请指导。
FootNote: Is there any problem in my render function. Kindly guide.
推荐答案
您已绑定模型的变化事件视图的渲染方法， this.model.on（'变'，this.render，这一点）; 这意味着对模型的每一个变化，视图将重新渲染
You have bound the model's change event to the view's render method with this.model.on('change', this.render, this); this means for every change on model, view will re-render.
和你传递模型属性直接一些图表（）功能。我们不知道发生了什么事情里面，但机会是它的更新模型属性多次图表绘图的一部分，显然每个变化导致另一个渲染它调用了再图（）方法，它调用渲染，从而创建了一个渲染循环，很可能只要更改数量通过来制作模型图（）功能。
And you're passing model attributes directly to some Chart() function. We don't know what's going on inside it, but chances are it's updating model attributes many times as part of chart drawing and obviously each change causes another render which invokes the Chart() method again, which invokes the render and hence creates a render loop that is likely as long as the number of changes made to model by Chart() function.
请删除 this.model.on（'变'，this.render，这一点）; 或使用模型的 的toJSON（）它 方法来获取复制的数据，并将其传递到图表（）法图。用例一样，这就是为什么的toJSON（）方法存在的原因。
Either remove this.model.on('change', this.render, this); or use model's toJSON() method to get a copy of it's data and pass it to chart() method for drawing. Use cases like this is the reason why toJSON() method exists.
另一个问题是处理异步取，我觉得 this.model.on（'变'，this.render，这一点）; 是你试图处理这个问题，但它是错误的。要么你要听的事件，如同步来代替，如
Another issue is handling the asynchronous fetch, I think this.model.on('change', this.render, this); was your attempt to handle this, but it's wrong. Either you should listen to events such as sync instead, like
this.model.on('sync', this.render, this);
或做这样的事情：
var ch = new dashboardModel.chart({});
/* ---------------------------^ this is the actual model constructor?
Then what's dashboardModel?! Bad naming ;) */
ch.fetch({
success: function(model, response) {
new firstSubViewModel({
el: '#chartAnchor1',
model: ch
});
}
});
除此之外，你不应该手动初始化模式。它是由Backbone.js的处理，并且只的一次初始化code 的应该里面加了一次活动。我甚至不能想到什么你试图通过手动调用初始化对已经初始化的模式。
Apart from that you should not manually initialize models. It's a one time activity handled by Backbone.js and only one time initialization code should be added inside it. I can't even think of what you were trying to achieve by manually invoking initialize on an already initialized model.
要取你应该使用取（）方法从你的持久层的数据。
To fetch data from your persistence layer you should be using fetch() method.
fetchModelData: function() {
this.model.fetch({/* options */});
}
在控制你的code有很多的问题。这似乎尝试和取（）一些数据模型？，但取方法只接受的选项的，大多是用于自定义和处理AJAX调用就像我上面所使用的那些（也许他们实际上是选择，但你把它命名为数据的？请忽略此之一的那种情况）。
Your code in controller has many issues. It seems to try and fetch() a model with some data?, but fetch method only accepts options, mostly for customizing and handling the AJAX call like the ones I've used above (Maybe they were actually options but you named it data?! Ignore this one in that case).
此外还有与清理没有提及游逛一看，直接引用DOM通过报选项，如果你创建的另一个实例，这将导致问题 firstSubViewModel >中，使用在 listenTo 等所有领先的经典Backbone.js的盲蝽象内存泄漏，事件和这些问题。
Also there's a view hanging around with no references for cleanup, a direct reference to DOM via el option which will cause issues if you create another instance of firstSubViewModel, use of on instead of listenTo etc all leading to classic Backbone.js bugs like memory leaks, issues with events and such.
所有这些不能回答所以我建议正确阅读文档，做关于Backbone.js的共同问题，一些研究处理。
All those can't be handled in an answer so I suggest reading the docs properly and doing some research about common Backbone.js issues.
边注：根据通用命名转换， firstSubViewModel 应 FirstSubViewModel ，因为它是一个构造
Side note: According to common naming conversion, firstSubViewModel should be FirstSubViewModel because it's a constructor.
这篇关于页面刷新获取/重载多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
