如何在 epoxy 渲染函数中只渲染一个视图
how to only render one view inside of the epoxy render function
我正在开发 Backbone、Marionette、Epoxy、Underscore 程序,但在渲染嵌套在 Render() 的视图构造函数内的单个视图时遇到问题功能。此函数内部还有 3 个其他视图,但是当调用构造函数时,我希望能够仅呈现 CustomizationView。
有什么办法可以做到吗?
这是调用 SettingsView 的视图构造函数并将其呈现在 CustomerView 中的代码
render:function(){
//renders all of the settings from the settings inclusion variable
var data = this.viewModel.toJSON();
data.customer = this.model.toJSON();
this.$el.html(_.template(tmpl, data, {variable:'data'}));
this.ui_settings = new settings.SettingsView({
el: this.$('#vc-customer-settings'),
model: this.model.get("_Settings")
});
this.applyBindings();
}
这是 settingsView 构造函数内部的渲染函数。我可以注释掉我不想在 CustomerView 中看到的视图并且它可以工作,但是它会破坏程序的其余部分。有什么方法可以在调用 settings.SettingsView 构造函数时获取 CustomizationView 模型?我显然想保留 SettingsView,因为它包含大量我需要的代码以及 CustomizationView。
render:function(){
this.$el.html(_.template(other_settings, {}, {variable:'args'}));
this.ui_messages = new LIB.MessageCollectionView({
el:this.$('.messages ul'),
collection:this.model.get("_Messages"),
parent: this
});
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.ui_increments = new LIB.IncrementCollectionView({
el:this.$('.increments ul'),
collection:this.model.get("_Increments")
});
我解决了这个问题。我简单地创建了一个名为 adminRender()
的新构造函数,然后在其中我使用 this.$el.html(_.template())
的新 html 模板调用了 CustomizationView 构造函数。然后,当 SettingsView class 对象在 CustomerView 中实例化时,我测试了当前工作目录并创建了一个调用适当渲染函数的三元语句。它看起来像这样:
adminRender:function(){
this.$el.html(_.template(other_settings, {}, {variable: 'args'}));
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.listenToOnce(this.model, 'change:Keymap', this.initKeymap);
this.listenTo(this.model, 'keypressed', _.bind(this.replaceButton, this));
},
userRender:function(){
this.$el.html(_.template(tmpl, {}, {variable:'args'}));
this.ui_messages = new LIB.MessageCollectionView({
el:this.$('.messages ul'),
collection:this.model.get("_Messages"),
parent: this
});
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.ui_increments = new LIB.IncrementCollectionView({
el:this.$('.increments ul'),
collection:this.model.get("_Increments")
});
然后在 SettingsView 构造函数中,我会像这样调用适当的渲染函数:
var pathName = window.location.pathname;
var pathName = "/admin/customers/new" ? view.adminRender() : view.userRender();
现在可以了!!!耶:)
我正在开发 Backbone、Marionette、Epoxy、Underscore 程序,但在渲染嵌套在 Render() 的视图构造函数内的单个视图时遇到问题功能。此函数内部还有 3 个其他视图,但是当调用构造函数时,我希望能够仅呈现 CustomizationView。
有什么办法可以做到吗?
这是调用 SettingsView 的视图构造函数并将其呈现在 CustomerView 中的代码
render:function(){
//renders all of the settings from the settings inclusion variable
var data = this.viewModel.toJSON();
data.customer = this.model.toJSON();
this.$el.html(_.template(tmpl, data, {variable:'data'}));
this.ui_settings = new settings.SettingsView({
el: this.$('#vc-customer-settings'),
model: this.model.get("_Settings")
});
this.applyBindings();
}
这是 settingsView 构造函数内部的渲染函数。我可以注释掉我不想在 CustomerView 中看到的视图并且它可以工作,但是它会破坏程序的其余部分。有什么方法可以在调用 settings.SettingsView 构造函数时获取 CustomizationView 模型?我显然想保留 SettingsView,因为它包含大量我需要的代码以及 CustomizationView。
render:function(){
this.$el.html(_.template(other_settings, {}, {variable:'args'}));
this.ui_messages = new LIB.MessageCollectionView({
el:this.$('.messages ul'),
collection:this.model.get("_Messages"),
parent: this
});
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.ui_increments = new LIB.IncrementCollectionView({
el:this.$('.increments ul'),
collection:this.model.get("_Increments")
});
我解决了这个问题。我简单地创建了一个名为 adminRender()
的新构造函数,然后在其中我使用 this.$el.html(_.template())
的新 html 模板调用了 CustomizationView 构造函数。然后,当 SettingsView class 对象在 CustomerView 中实例化时,我测试了当前工作目录并创建了一个调用适当渲染函数的三元语句。它看起来像这样:
adminRender:function(){
this.$el.html(_.template(other_settings, {}, {variable: 'args'}));
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.listenToOnce(this.model, 'change:Keymap', this.initKeymap);
this.listenTo(this.model, 'keypressed', _.bind(this.replaceButton, this));
},
userRender:function(){
this.$el.html(_.template(tmpl, {}, {variable:'args'}));
this.ui_messages = new LIB.MessageCollectionView({
el:this.$('.messages ul'),
collection:this.model.get("_Messages"),
parent: this
});
this.ui_customizations = new LIB.CustomizationCollectionView({
el:this.$('.other-settings ul'),
collection:this.model.get("_Customizations")
});
this.ui_increments = new LIB.IncrementCollectionView({
el:this.$('.increments ul'),
collection:this.model.get("_Increments")
});
然后在 SettingsView 构造函数中,我会像这样调用适当的渲染函数:
var pathName = window.location.pathname;
var pathName = "/admin/customers/new" ? view.adminRender() : view.userRender();
现在可以了!!!耶:)