Question

我刚刚开始使用Backbone.js，我已经设法从服务器返回一个项目列表，但我仍然坚持下一步，即当一个项目被点击时模型的详细视图被展示。在路由器中，我尝试创建一个名为“show：id”的路由：“show”，但它没有在ASP.NET MVC3应用程序中拾取我的MVC控制器内的路径，该应用程序用[HttpGet]动词修饰。一个好的开始只是在我在控制台中点击app.navigate（'show / 1'，true）时触发show方法。

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

Answer 1

首先，请记住客户端上的路由与服务器上的路由完全分开。这些是响应散列更改的路由（地址栏中的＃）。这些不映射到服务器上的路由。

如果您希望触发这些路线，则必须在EventsListView中创建一个看起来像这样的锚点：

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

我希望这就是解雇这条路线的意思。

祝你好运

BackBone.JS显示集合中项目的详细信息视图

1 个答案: