在 Backbone.js 中为集合中的一个元素创建详细信息页面

Creating a details page in Backbone.js for one element in a collection

本文关键字：元素 一个 创建 详细信息 js Backbone 集合      更新时间：2023-09-26

我被Backbone中的某些东西困住了。下面是我收藏中的项目示例：

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 }));
            },
        });

现在我还想要一个详细信息视图，我已经拥有每个带有唯一链接（见上文）的图像，并给出了url_title例如，当我点击第一个 gif 下面的链接时，我被重定向到 #detail/Wolf现在，我不需要通过 for 循环，在我看来只需要一个 gif。

显然，我需要用url_title做到这一点，但我不知道究竟如何......

所以现在我只有这个作为详细视图：

        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 gifs = this.collection.models;
                //NO FOR LOOP BUT ONLY SINGLE ELEMENT FROM COLLECTION
                //I don't know what to put here :|
            },
            });

这是我的详细信息页面的路线 

            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
        }
        });

我将非常感谢对此的帮助。谢谢。

您可以使用 Backbone Collection.where（） 来选择与模式匹配的项目。尝试：

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_with_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
        }

然后，您可以仅使用Fill_me_with_one_gif中所需的模型

或者，如果您已经为 GifCollectiion 定义了模型，则可以使用 Backbone idAttribute 告诉 Backbone 如何唯一标识项目：

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")

    },
});
相关文章：