Javascript 视图中视图中的主干视图-为什么。$el.html(';在此处插入一些内容';)什么都不做?
这将是一个相当复杂的问题,所以我将继续添加到它 我的应用程序由两种主要类型的视图构成-标准视图和区域(一种特殊类型的视图,仅用于包含其他视图)。我的根应用程序视图是一个区域,由各种其他区域组成,我可以根据需要“插入”视图 我所有位于主应用程序区域(页眉、页脚、modals等)的视图都工作得非常好。今天我尝试在其他视图中创建一些子区域,但遇到了一个障碍。出于某种原因,当我调用Javascript 视图中视图中的主干视图-为什么。$el.html(';在此处插入一些内容';)什么都不做?,javascript,backbone.js,Javascript,Backbone.js,这将是一个相当复杂的问题,所以我将继续添加到它 我的应用程序由两种主要类型的视图构成-标准视图和区域(一种特殊类型的视图,仅用于包含其他视图)。我的根应用程序视图是一个区域,由各种其他区域组成,我可以根据需要“插入”视图 我所有位于主应用程序区域(页眉、页脚、modals等)的视图都工作得非常好。今天我尝试在其他视图中创建一些子区域,但遇到了一个障碍。出于某种原因,当我调用this.$el.html()时在要传入区域的指定视图输出的区域上,什么也没有发生。我可以单步执行代码,视图本身呈现得很好,
this.$el.html()时
在要传入区域的指定视图输出的区域上,什么也没有发生。我可以单步执行代码,视图本身呈现得很好,我可以通过在控制台中查看对象模型来查看标记。但是,它实际上从未连接到页面,我看到的只是表示区域包装器的标记。
这里有一些代码-希望它会有一些意义,但这会下降很多级别
首先,我的视图和区域基类
define(['backbone', 'helpers/cookie-manager'],
function (Backbone, CookieManager) {
var spinner = "<img src='/content/images/global/ajax-loader.png' alt='loading...' />";
var ministryView = Backbone.View.extend({
name: 'Unnamed View',
sectionName: 'No section specified',
stateRequired: false,
template: undefined,
bindings: [],
initialize: function (options) {
this.options = options || {};
Backbone.View.prototype.initialize.call(this, options);
if (this.options.name) {
this.name = this.options.name;
}
if (this.options.sectionName) {
this.sectionName = this.options.sectionName;
}
if (this.options.template) {
this.template = this.options.template;
}
},
bindToModel: function (model, ev, callback, that) {
if (that === undefined || that === null) {
throw "The value of 'that' needs the context of the extending class in order to operate correctly.";
}
model.bind(ev, callback, that);
this.bindings.push({ model: model, ev: ev, callback: callback });
},
dispose: function () {
this.unbindFromAllModels(); // Will unbind all events this view has bound to
this.stopListening();
this.unbind(); // This will unbind all listeners to events from this view. This is probably not necessary because this view will be garbage collected.
this.remove(); // Uses the default Backbone.View.remove() method which removes this.el from the DOM and removes DOM events.
this.undelegateEvents();
},
render: function () {
this.trigger('rendered');
return this;
},
resetStyleState: function(condition) {
},
trash: function () {
this.dispose();
},
unbindFromAllModels: function () {
_.each(this.bindings, function (binding) {
binding.model.unbind(binding.ev, binding.callback);
});
this.bindings = [];
}
});
var ministryRegion = ministryView.extend({
name: 'Unnamed Region',
currentView: undefined,
initialize: function (options) {
this.options = options || {};
ministryView.prototype.initialize.call(this, options);
if (this.options.currentView) {
this.currentView = this.options.currentView;
}
_.bindAll(this, 'placeRenderedView');
_.bindAll(this, 'showRendering');
},
placeRenderedView: function () {
this.$el.html(this.currentView.$el);
this.currentView.delegateEvents();
if (this.currentView.postRender !== undefined && this.currentView.postRender !== null) {
this.currentView.postRender();
}
},
renderView: function (view) {
if (view) {
if (this.currentView) {
this.currentView.trash();
}
this.currentView = view;
}
this.currentView.bind('rendering', this.showRendering);
this.currentView.bind('rendered', this.placeRenderedView);
this.currentView.render();
},
showRendering: function () {
this.$el.html(spinner);
},
trash: function(disposeRegion) {
this.currentView.trash();
if (disposeRegion !== undefined && disposeRegion !== null && disposeRegion !== false) {
this.dispose();
}
}
});
return {
View: ministryView,
Region: ministryRegion
};
});
…这是一个模板
<section class="meal-plans-container">
</section>
这是一个模板
<ul id="mealPlansList" class="swatch-listview-b">
<li class="listview-header">Meal Plans</li>
{{#each plans}}
<li><span class="meal-plan-id-holder hidden">{{id}}</span>{{name}}</li>
{{/each}}
</ul>
…而this.$el.html(this.currentView.$el);
行根本不起任何作用
如果我能提供任何其他帮助,请告诉我。在本文的帮助下,我设法解决了这个问题- 我重写了
memberHomeView
类,并将区域实例化从render
移动到postRender
函数。这确保了模板渲染已经完成,从而允许区域正确实例化(现在我想起来了,这就是为什么我首先创建了postdrender
方法
这是修改后的函数
define(['ministry', 'jquery', 'views/v-header', 'models/m-ns', 'views/components/components', 'text!templates/hub/member-home.html'],
function (Ministry, $, Header, Models, Components, TemplateSource) {
var memberHomeView = Ministry.SecureView.extend({
name: 'Member Home',
sectionName: 'Hub',
mealPlansRegion: undefined,
template: Handlebars.compile(TemplateSource),
headerView: new Header({ text: 'Kitchen Hub', swatch: 'a' }),
initialize: function (options) {
Ministry.SecureView.prototype.initialize.call(this, options);
},
// Need to override the normal secured view implementation.
render: function () {
this.$el.html(this.template(this));
this.trigger('rendered');
return this;
},
postRender: function () {
if (!this.isSecured()) {
SiansPlanApp.router.navigate('/');
SiansPlanApp.renderHome(false);
} else {
// MOVED THE REGION INSTANTIATION HERE
this.mealPlansRegion = new Ministry.Region({ el: '.meal-plans-container' });
this.mealPlansRegion.renderView(new Components.MealPlansList({ collection: new Models.MealPlan.OwnedCollection({ username: SiansPlanApp.session.username() }) }));
}
}
});
return memberHomeView;
});
简单地说
如果附加到外部标记,请确保在尝试添加使用该标记的子视图或区域之前已呈现该标记,否则您可能会哭泣。
<ul id="mealPlansList" class="swatch-listview-b">
<li class="listview-header">Meal Plans</li>
{{#each plans}}
<li><span class="meal-plan-id-holder hidden">{{id}}</span>{{name}}</li>
{{/each}}
</ul>
placeRenderedView: function () {
this.$el.html(this.currentView.$el);
this.currentView.delegateEvents();
if (this.currentView.postRender !== undefined && this.currentView.postRender !== null) {
this.currentView.postRender();
}
},
define(['ministry', 'jquery', 'views/v-header', 'models/m-ns', 'views/components/components', 'text!templates/hub/member-home.html'],
function (Ministry, $, Header, Models, Components, TemplateSource) {
var memberHomeView = Ministry.SecureView.extend({
name: 'Member Home',
sectionName: 'Hub',
mealPlansRegion: undefined,
template: Handlebars.compile(TemplateSource),
headerView: new Header({ text: 'Kitchen Hub', swatch: 'a' }),
initialize: function (options) {
Ministry.SecureView.prototype.initialize.call(this, options);
},
// Need to override the normal secured view implementation.
render: function () {
this.$el.html(this.template(this));
this.trigger('rendered');
return this;
},
postRender: function () {
if (!this.isSecured()) {
SiansPlanApp.router.navigate('/');
SiansPlanApp.renderHome(false);
} else {
// MOVED THE REGION INSTANTIATION HERE
this.mealPlansRegion = new Ministry.Region({ el: '.meal-plans-container' });
this.mealPlansRegion.renderView(new Components.MealPlansList({ collection: new Models.MealPlan.OwnedCollection({ username: SiansPlanApp.session.username() }) }));
}
}
});
return memberHomeView;
});