0

バックボーンで何かが詰まっています。私のコレクションのアイテムの例を次に示します。

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 Now にリダイレクトされます。 for ループを介して、ビューにその 1 つの 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
        }
        });

これを手伝ってくれてとても感謝しています。ありがとうございました。

4

1 に答える 1

1

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 に渡すか、事前にモデルを特定して送信する必要があります (私はおそらく 2 番目を選択します)。これを行うには、詳細ページのルートは次のようになります。

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を使用して、アイテム ala を一意に識別する方法を 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")


    },
});
于 2013-11-01T14:24:31.667 に答える