BackBone.JS 컬렉션에있는 항목의 상세보기 표시

방금 Backbone.js를 사용하기 시작했습니다. 서버에서 항목 목록을 가져 왔지만 다음 단계로 넘어갔습니다. 항목을 클릭하면 모델의 상세 뷰가 표시됩니다. 라우터에서 "show : id": "show"라는 경로를 만들려고했지만 [HttpGet] 동사로 장식 된 ASP.NET MVC3 응용 프로그램 내에서 내 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

가 첫 번째 경로가 잘 작동

행운을 빕니다 (인덱스 방법), 두 번째 경로 (보기)를 명중되지 않습니다. 나는 자바 스크립트 안의 라우터 나 컨트롤러의 라우터 중 하나를 제대로 만들지 못했다고 염려한다. – MikeRay1

페니가 드디어 삭제되었습니다. 모델이나 컬렉션의 URL에 경로를 지정하지 않으면 경로가 서버 측 경로에 매핑되지 않습니다. – MikeRay1

대단하다. 당신이 그것을 알아 냈기 때문에 기쁘다. – timDunham

BackBone.JS 컬렉션에있는 항목의 상세보기 표시

답변

관련 문제