BackBone.JS顯示集合中項目的詳細信息視圖

我剛剛開始使用Backbone.js，我設法從服務器中取回項目列表，但我堅持下一步這是當一個項目被點擊時，模型的詳細視圖被顯示。在路由器中，我嘗試創建一個名爲「show：id」：「show」的路由，但是它並沒有在ASP.NET MVC3應用中使用[HttpGet]動詞修飾MVC控制器內部的路由。一個好的開始只是當我在控制檯中打開app.navigate（'show/1'，true）時才能使show方法觸發。BackBone.JS顯示集合中項目的詳細信息視圖

EventDate = Backbone.Model.extend({ 
    idAttribute: "eventDateID" 
}); 
EventDates = Backbone.Collection.extend(
    { 
     model: EventDate, 
     url: "WebPortal.MVC/Api/EventsAttending" 
     //url: "WebPortal.MVC/events/list" 
    }); 
eventDates = new EventDates(); 

EventsListView = Backbone.View.extend(
    { 
     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.template = $("#yourevents-template"); 
      this.collection.bind("reset", this.render); 
      window.ViewModel = this.model; 
     }, 

     render: function() { 
      var html = this.template.tmpl(this.collection.toJSON()); 
      $(this.el).html(html); 
      return this; 
     } 
    }); 




var EventsAdmin = Backbone.Router.extend({ 
    initialize: function() { 
     eventsListView = new EventsListView({ collection: eventDates, el: ".yourEvents tbody" }); 
    }, 
    routes: { 
     "": "index", 
     "/Show/:id": "Show" 
    }, 
    index: function() { 
     eventsListView.render(); 
    }, 
    Show: function (id) { 
     $('#show').html("The id is " + id); 
    } 



}); 


> jQuery(function() { 

    eventDates.fetch({ 
      success: function() { 
       //creater the router 
       window.app = new EventsAdmin(); 
       Backbone.history.start(); 
      }, 
      error: function() { 
       //display a nice error page 
      } 
     }); 
});

以下是我的控制器

[HttpGet] 
     public ActionResult Index(int userid = 1) 
     { 
      var FindEvents = new FindEventsByAttendeeRequest { UserID = userid }; 
      var model = _eventsService.FindEventsByUserID(FindEvents).EventFound; 

      return Json(model.Select(c => new 
          { 
           c.EventDate.Event.Description, 
           c.EventDate.Event.Title, 
           c.EventDate.StartDate, 
           userid, 
           eventDateID = c.EventDate.ID, 
           VenueName = c.EventDate.Venue.Name, 
           c.EventDate.VenueID, 
           eventID = c.EventDate.Event.ID, 
           attendeeID = c.ID 
          }).OrderBy(o => o.StartDate).Where(u => u.StartDate.Date >= DateTime.Today), JsonRequestBehavior.AllowGet); 
    } 

    [HttpGet] 
    public ActionResult Show(int ID) 
    { 
     var FindAttendee = new GetAttendeeRequest {Id = ID}; 
     var model = _eventsService.GetAttendees(FindAttendee); 

     return Json(model); 
    }

來源

2011-09-13 MikeRay1

首先代碼，請記住，在客戶端上的路線是從你的服務器上的路線完全分開。這些是響應散列更改的路由（地址欄中的＃）。這些不映射到服務器上的路由。

如果你想這些路由火，你有你的EventsListView創建一個錨說，看起來是這樣的：

<a href="#/Show/12345">Show Event 12345</a>

我希望這是你的射擊路線是什麼意思。

好運

來源

2011-09-14 01:40:22 timDunham

我的問題是，我已經宣佈在路由器2點的路線，第一路線正常工作，（該指數的方法），第二條路線（顯示）永遠不會打。我擔心我沒有在我的javascript或控制器中的路由器上正確創建路由。 – MikeRay1

該penny終於下降，路線不映射到任何服務器端路由，除非我們在模型或集合的url中指定它們。 – MikeRay1

太棒了。我很高興你知道了 – timDunham

BackBone.JS顯示集合中項目的詳細信息視圖

回答

相關問題