Javascript 在Backbone.js中为集合中的一个元素创建详细信息页面
我的脊梁骨有些东西卡住了。 以下是我的收藏中的一个项目示例:Javascript 在Backbone.js中为集合中的一个元素创建详细信息页面,javascript,jquery,html,backbone.js,Javascript,Jquery,Html,Backbone.js,我的脊梁骨有些东西卡住了。 以下是我的收藏中的一个项目示例: var gifs = new GifCollection([ {image: "images/gifs/wolf.gif", url_title: "Wolf", ratings: [0,0], rating: 3, comments: "Awesome picture.", title:"Wolf", category:"Animals"}, ]); 现在在我的普通/主视图中,我通过FOR循环列出每个项目 这是:
var gifs = new GifCollection([
{image: "images/gifs/wolf.gif",
url_title: "Wolf",
ratings: [0,0],
rating: 3, comments: "Awesome picture.",
title:"Wolf", category:"Animals"},
]);
现在在我的普通/主视图中,我通过FOR循环列出每个项目
这是:
var Fill_me_with_gifs = Backbone.View.extend({
el: "#fill_me_with_gifs",
render: function () {
var template = $("#user-view-template").html();
var gifs_html = '';
var gifs = this.collection.models;
for (var gif in gifs)
{
gifs_html += '<tr>';
gifs_html += '<td>' + "<h4>" + gifs[gif].get("title") + "</h4>" + '</td>';
gifs_html += '</tr>';
gifs_html += '<tr>';
gifs_html += '<td>' + "<img src=\"" + gifs[gif].get("image") + "\"" + " width=\"500\"" + ">"+ '</td>';
gifs_html += '</tr>';
gifs_html += '<tr>';
gifs_html += '<td>' + "<a href=\"#detail/" + gifs[gif].get("url_title") + "\"> View comments, rate and more</a>" + "</td>";
gifs_html += '</tr>';
}
this.$el.html( _.template( template, { gifs: gifs_html }));
},
});
这是我进入详细页面的路线
router.on("route:detail", function (url_title) {
$(".nav li").removeClass("active");
$("#nav-detail").addClass("active");
console.log("Show Detail Page for " + url_title);
var fill_me_with_one_gif = new Fill_me_with_one_gif({ collection: gifs });
fill_me_with_one_gif.render();
这是我的路由器:
var Router = Backbone.Router.extend({
routes: {
"" : "home",
"categories" : "categories",
"popular" : "popular",
"detail" : "detail",
"detail/:url_title" : "detail" //this is the one I'm having trouble with
}
});
我将非常感谢您的帮助。
谢谢。您可以使用来选择与模式匹配的项目。尝试:
var matchingModels = gifs.where({
"url_title" : url_title
});
if(matchingModels.length>0){
//Select the first matching model
selectedModel = matchingModels[0]
}
这将返回所有匹配模型的数组。如果您只对第一项感兴趣,可以检查长度,然后拉动[0]。您必须将url_title和集合一起传递给新的Fill_me_和_one_gif,或者事先确定模型并发送(我可能会选择第二个)。为此,详细信息页面上的路线如下所示:
router.on("route:detail", function (url_title) {
$(".nav li").removeClass("active");
$("#nav-detail").addClass("active");
var matchingModels = gifs.where({
"url_title" : url_title
});
if(matchingModels.length && matchingModels.length>0){
var fill_me_with_one_gif = new Fill_me_with_one_gif({ model: matchingModels[0] });
fill_me_with_one_gif.render();
} else {
//No Matching URL TITLE? so Dont render the details
}
然后,您可以只使用“用一个”gif填充“我”中所需的模型
或者,如果您已经为GifCollection定义了一个模型,则可以使用告诉主干如何唯一标识项目:
var GifCollectionItem = Backbone.Model.extend({
idAttribute : "url_title"
});
然后可以使用{collection}.get(“wolf”)从集合中选择项
编辑:对不起,刚才抽搐了。这是最简单的答案:
var Fill_me_with_one_gif = Backbone.View.extend({
el: "#fill_me_with_gifs",
render: function (url_title) {
var template = $("#user-view-template").html();
var gifs_html = '';
var matchingModels = gifs.where({
"url_title" : url_title
});
if(matchingModels.length>0){
//Select the first matching model
selectedModel = matchingModels[0]
}
//THIS IS WHERE YOU DRAW THE SELECTED DETAILS
//Use selectedModel to access your info
//EX: selectedModel.get("name")
},
});
谢谢你的回答。我该如何在代码中添加所有这些内容?很抱歉,如果这要求太多,我只是主干和js的一个真正的新手:/如果你真的感到慷慨,我将永远感激你。这是我当前的全部代码:编辑代码以在底部显示easiet答案。在“详细信息页面路由”中调用render()时,不要忘记包含url_标题!谢谢你的更新,不幸的是它不起作用,尽管我不明白为什么。。当你用另一个答案回答时,我被炒作了一秒钟,但我想我做错了什么。我很抱歉一直打扰你,如果你能看看,看看是怎么回事,我将永远感激。没问题……我这个周末晚些时候会有时间看一看。对不起,我帮不上忙了
var Fill_me_with_one_gif = Backbone.View.extend({
el: "#fill_me_with_gifs",
render: function (url_title) {
var template = $("#user-view-template").html();
var gifs_html = '';
var matchingModels = gifs.where({
"url_title" : url_title
});
if(matchingModels.length>0){
//Select the first matching model
selectedModel = matchingModels[0]
}
//THIS IS WHERE YOU DRAW THE SELECTED DETAILS
//Use selectedModel to access your info
//EX: selectedModel.get("name")
},
});