我正在为我正在构建的应用程序使用主干。在这个应用程序中,我有一个主视图,它呈现一个模板,里面有 2 个其他视图。一个标题视图和另一个带有一些内容的视图。标题视图仅用于与内容视图交互,并且也具有特定的功能。
在标题模板和内容模板中,我有相同的代码,一个隐藏的 DIV,带有一个加载器图像,在进行 ajax 调用时显示。我遇到的问题是,当我第一次加载应用程序时(或者当我刷新内容视图时),内容视图正在从 ajax 请求中加载一些数据,但是加载器同时显示在标题和内容中模板(例如如果 ajaxStart() 是未附加到视图的全局事件。
这是内容视图设置:
App.View.Content = Backbone.View.extend({ type:'test', template: twig({ href: '/js/app/Template/Content.html.twig', async: false }), block:{ test:twig({ href: '/js/app/Template/block/test.html.twig', async: false }) }, list:[], showLoader: function(el){ console.log('loader: ', $('#ajax_loader', el)); $('#ajax_loader', el).show(); console.log('Ajax request started...'); }, hideLoader: function(el){ $('#ajax_loader', el).hide(); console.log('Ajax request ended...'); }, initialize: function(params) { this.el = params.el; this.type = params.type || this.type; var self = this; this.el .ajaxStart(function(){self.showLoader(self.el);}) .ajaxStop(function(){self.hideLoader(self.el);}); this.render(function(){ self.list = new App.Collection.ListCollection(); self.refresh(1, 10); }); }, refresh:function(page, limit) { var self = this; console.log('Refreshing...'); $('#id-list-content').fadeOut('fast', function(){ $(this).html(''); }); this.list.type = this.type; this.list.page = page || 1; this.list.limit = limit || 10; this.list.fetch({ success: function(data){ //console.log(data.toJSON()); $.each(data.toJSON(), function(){ //console.log(this.type); var tpl_block = self.block[this.type]; if (tpl_block != undefined) { var block = tpl_block.render({ test: this }); $(block).appendTo('#id-list-content'); } }); $('#id-list-content').fadeIn('fast'); } }); }, render: function(callback) { console.log('Rendering list...'); this.el.html(this.template.render({ })); if (undefined != callback) { callback(); } } });
如您所见,我正在使用一段丑陋的代码来附加 ajaxStart / ajaxStop 事件:
this.el
.ajaxStart(function(){self.showLoader(self.el);})
.ajaxStop(function(){self.hideLoader(self.el);});
我以前是这样的:
this.el
.ajaxStart(self.showLoader())
.ajaxStop(self.hideLoader());
但是无论出于何种原因,我仍然未定义,this.el
并没有在showLoader()
and中定义hideLoader()
。
我当时在想,ajaxStart()
并且ajaxStop()
被附加到this.el
DOM 上,只有这个视图才能听到它。但是我的 headerView 具有完全相同的设置(加载的树枝模板除外)显然接收到事件并显示加载器。
为了确保这种行为,我showLoader()
在内容视图中注释掉了,加载器仍然显示在标题视图中。
我不知道我做错了什么:(
编辑(在“mu太短”的回答之后):
我的内容视图现在看起来像这样:
showLoader: function(){
//this.$('#ajax_loader').show();
console.log('Ajax request started...');
},
hideLoader: function(){
this.$('#ajax_loader').hide();
console.log('Ajax request ended...');
},
initialize: function(params)
{
var self = this;
console.log(this.el);
_.bindAll(this, 'showLoader', 'hideLoader');
this.$el
.ajaxStart(this.showLoader)
.ajaxStop(this.hideLoader);
this.render(function(){
self.list = new App.Collection.List();
self.refresh(1, 10);
});
},
...
render: function(callback)
{
console.log('Rendering post by page...');
this.$el.html(this.template.render({
}));
if (undefined != callback) {
callback();
}
}
和我的标题视图:
...
showLoader: function(){
this.$('#ajax_loader').show();
//console.log('Ajax request started...');
},
hideLoader: function(el){
this.$('#ajax_loader').hide();
console.log('Ajax request ended...');
},
initialize: function(params)
{
var self = this;
_.bindAll(this, 'showLoader', 'hideLoader');
this.$el
.ajaxStart(this.showLoader)
.ajaxStop(this.hideLoader);
this.models.Link = new App.Model.Link();
this.render();
},
render: function(callback)
{
this.$el.html(this.template.render({
data: []
}));
if (undefined != callback) {
callback();
}
}
...
但是加载器仍然显示在标题视图模板中
PS:this.showLoader()
不是错字,因为我想在当前主干视图中调用该函数。