在下方编辑
在下图中,我有两个主要区域。
左侧用户列表中的一个: allusersRegion
另一个显示布局的右侧,其中包含在 allusersRegion 中单击的用户的唯一属性以及用户的文章列表:middleCoreRegion
**如果您注意到middleCoreRegion显示所有用户的所有文章..这是错误的,我试图显示个人用户的所有文章(在这种情况下。“kev”)
我试着看看我的问题是我的JSON api(通过node / rest / mongoose提供)还是使用我的下划线模板,但是如果它同时显示两个列表,那么我想我需要从骨干内部进行过滤。
起初我尝试使用Marionette.vent来简单地更改url,但是我无法将_id名称输入url:function(),它表示未定义...
var someuser = this.model.get("_id");
myApp.vent.trigger("showarticles", someuser);
我在同一页面的骨干集合中添加了一个监听器:
myApp.vent.on("showarticles", someuser);
**编辑(不同的方式)这是我的代码
var usertab = Poplive.module('usertab', {
startWithParent: true,
});
usertab.addInitializer(function() {
User = Backbone.Model.extend({});
UniqueArticle = Backbone.Model.extend({});
//Collections
Users = Backbone.Collection.extend({
model: User,
url: '/api/user2'
});
UniqueArticles = Backbone.Collection.extend({
model: UniqueArticle,
url: '/api/survey'
});
//Layout
var VisitingLayoutView = Backbone.Marionette.Layout.extend({
template: "#visiting-layout",
regions: {
firstRegion: "#listone",
secondRegion: "#listtwo",
thirdRegion: "#listthree",
playRegion: "#playhere",
articlesRegion: "#articleshere"
}
});
AllUserView = Backbone.Marionette.ItemView.extend({
template: "#tab-alluser-template",
tagName: 'li',
events: {
"click #openprofile" : "OpenProfile"
},
OpenProfile: function(){
console.log("Profile is open for " + this.model.get("username"));
var modelo = this.model.get("_id");
var vlv = new VisitingLayoutView({model: this.model});
Poplive.middleCoreRegion.show(vlv);
var ua = new UniqueArticles();
var uacoll = new UniqueArticlesView({collection: ua});
vlv.articlesRegion.show(uacoll);
}
})
//ItemViews
UniqueArticleView = Backbone.Marionette.ItemView.extend({
template: "#unique-article-template"
});
//CollectionViews
AllUsersView = Backbone.Marionette.CompositeView.extend({
template: "#tab-allusers-template",
itemView: AllUserView
});
UniqueArticlesView = Backbone.Marionette.CollectionView.extend({
template: "#unique-articles-template",
itemView: UniqueArticleView
});
//Render Views
var alluserview = new AllUserView();
var allusersview = new AllUsersView();
//Fetch Collections
var theusers = new Users();
theusers.fetch();
var userscoll = new AllUsersView({collection: theusers});
Poplive.allusersRegion.show(userscoll);
});
答案 0 :(得分:3)
假设UniqueArticle
是Backbone模型,对于要获取特定id的Model,您需要定义urlRoot属性,该属性将模型的id
附加到请求。 / p>
因此当你对它进行提取时,id属性将附加到服务器上的模型请求的末尾
var UniqueArticle = Backbone.Model.extend({
idAttribute : 'someuser',
urlRoot : function(someuser){
return '/api/visitingarticles/'
}
// this would send a request for
// /api/visitingarticles/someId
});
var UniqueArticles = Backbone.Collection.extend({
model: Article,
url : function(someuser){
return '/api/visitingarticles/'
}
// /api/visitingarticles -- All Articles will be fetched
});
答案 1 :(得分:3)
我认为您想要的是将url
定义为函数,并在您的集合中使用user
属性:
var UniqueArticles = Backbone.Collection.extend({
model: Article,
initialize: function(){
var self = this;
myApp.vent.on("showarticles", function(someuser){
self.user = someuser;
self.fetch();
}
},
url : function(){
var fragment = '/api/visitingarticles/';
if(this.user && this.user.id){
return fragment + this.user.id;
}
return fragment;
}
});
(免责声明:未经测试的代码,但它在我脑海中起作用:D)
然后,每次触发事件时,都会更新user
属性,并使用更新的网址重置集合。
作为旁注,您可能希望研究使用过滤后的集合。我在我的书中实现了这个想法,基于Derick Bailey的代码:http://jsfiddle.net/derickbailey/7tvzF/
这是我的版本:https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js
其使用示例(第38-41行):https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38