基本情况是这样的:
我有一个复合视图和一个项目视图。我构造了 Composite 视图,并传递了一个模型和一个集合。模型数据用于填充复合视图的模板。集合数据用于填充复合视图的项目视图。
我想做的是:在项目视图的模板助手中,我想访问复合视图的模型数据。我已经访问了项目视图的视图实例。我认为这可能会让我掌握复合视图,从那里我可以得到它的模型,但事实并非如此。
有没有办法可以做到这一点 - 从其项目视图实例之一访问复合视图实例?
谢谢
——贾斯汀·威利
基本情况是这样的:
我有一个复合视图和一个项目视图。我构造了 Composite 视图,并传递了一个模型和一个集合。模型数据用于填充复合视图的模板。集合数据用于填充复合视图的项目视图。
我想做的是:在项目视图的模板助手中,我想访问复合视图的模型数据。我已经访问了项目视图的视图实例。我认为这可能会让我掌握复合视图,从那里我可以得到它的模型,但事实并非如此。
有没有办法可以做到这一点 - 从其项目视图实例之一访问复合视图实例?
谢谢
——贾斯汀·威利
如果你想从父母那里访问数据,CompositeView
你可以做很多不同的事情。
通过. ItemView
_ itemViewOptions
_ 注意:此选项在 Marionette 2 中CompositeView
已更改为。childViewOptions
直接在所有子视图上调用一个方法,CompositeView
然后将您想要的任何内容传递给该方法。
触发事件或由ItemView
.
这些选项都不是直接从子视图访问父视图,而是应该做你想做的。下面是如何使用这些方法中的每一种将CompositeView
' 模型传递给子视图的代码。
// Pass model into ItemView on init
var MyItemView = Backbone.Marionette.ItemView.extend({
initialize : function (options) {
this.parentsModel = options.parentsModel;
}
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
itemViewOptions : function () { return { parentsModel: this.model }; }
itemView : MyItemView
});
// Invoke function on ItemView, passing data in
var MyItemView = Backbone.Marionette.ItemView.extend({
doSomethingWithParent : function (parentModel) {
// do cool thing with parentModel
}
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
itemView : MyItemView,
onRender : function () {
this.children.call("doSomethingWithParent", this.model);
}
});
// Trigger event that ItemView knows about
var MyItemView = Backbone.Marionette.ItemView.extend({
initialize : function () {
this.listenTo(this, "special:event", function (parentModel) {
// Do cool things
});
}
});
var MyCompView = Backbone.Marionette.CompositeView.extend({
itemView : MyItemView,
onRender : function () {
this.children.each(_.bind(function (childView) {
childView.trigger("special:event", this.model);
}, this));
}
});
我没有回答问题。但是改变方法是有效的。我没有尝试从项目视图访问“父”复合视图,而是从复合视图访问项目视图:
我可以修改当前项目视图的模型(基于复合视图模型中的值)。
以为我会分享 Andrew Hubbs 的建议如何帮助我。我试图显示与我的项目模板内联的父模型属性。我结合 Andrew 的一项建议使用 Marionette 的 templateHelpers 属性来执行此操作。
我试图使示例保持简短:
示例复合模板 - myView 模板:
<h1>Page {{name}}</h1>
<h6>Children</h6>
<ul></ul>
示例项目模板 - myItemTemplate:
{{name}} is child of: {{getParentName}}
意见:
App.module( 'App.View', function( View ){
View.MyItemView = Marionette.ItemView.extend({
initialize: function( options ) {
this.parentModel = options.parentModel;
},
template: myItemTemplate,
tagName: 'li',
templateHelpers: function() {
var view = this;
return {
// Called by item template, returns parent model 'name' property.
getParentName: function() {
return view.parentModel.get('name');
}
};
}
});
View.MyView = Marionette.CompositeView.extend({
template: myViewTemplate,
itemView: View.MyItemView,
itemViewContainer: 'ul',
itemViewOptions: function() {
return { parentModel: this.model };
}
});
});
一个如何实现的示例:
// example of how implementation
// parent model has an attribute called 'children', which is a collection of models
var children = parent.get('children');
var view = new App.View.MyView( { model: parent, collection: children } );
App.mainRegion.show( view );