在Backbone.js中爲集合中的一個元素創建詳細信息頁面

Question

我在Backbone中遇到了一些問題。 這是我收集的物品的示例：

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

      }, 

     }); 

現在我也想：

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循環 這是列出每個項目一個詳細信息視圖，我已經有了與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 
     } 
     }); 

我將非常感謝幫助。 謝謝。

Answer 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，或者事先確定模型併發送（我很可能會選擇第二個）。要做到這一點，您的詳細信息頁面上的路線將是這樣的：

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項目：

var GifCollectionItem = Backbone.Model.extend({ 
    idAttribute : "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 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") 


    }, 
});