骨干路由不使用URL调用操作

时间:2013-11-07 16:49:34

标签: asp.net-mvc backbone.js pushstate

这是使用ASP.NET MVC的简单ToDo应用程序的代码:

 var Appointment = Backbone.Model.extend({
        defaults: function () {
            return {
                'date': new Date(),
                'cancelled': false,
                'title': 'Checkup'
            }
        }
    });

    var AppointmentList = Backbone.Collection.extend({
        model: Appointment,
        url:"/Home/Appointments"
    });

    var AppointmentView = Backbone.View.extend({
        template: _.template('<span class="<% if(cancelled) print("cancelled") %>"><%= title %></span><a href="Home/Appointment/<%= id %>">x</a>'),

        initialize: function () {
            this.model.on('change', this.render, this);
        },

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    var AppointmentListView = Backbone.View.extend({
        initialize: function () {
            this.collection.on('add', this.addOne, this);
            this.collection.on('reset', this.render, this);
        },
        render: function () {
            this.collection.forEach(this.addOne, this);
        },
        addOne: function (model) {
            var appointmentView = new AppointmentView({ model: model });
            appointmentView.render();
            this.$el.append(appointmentView.el);
        }
    });


    var AppRouter = new (Backbone.Router.extend({
        routes: { "Home/Appointment/:id": "show", "": "index" },

        initialize: function (options) {
            this.appointmentList = new AppointmentList();
        },

        start: function () {
            Backbone.history.start({ pushState: true });
        },

        index: function () {
            var appointmentsView = new AppointmentListView({ collection: this.appointmentList });
            appointmentsView.render();
            $('body').html(appointmentsView.el);
            this.appointmentList.fetch();
        },

        show: function (id) {
            debugger;
            var appointment = new Appointment({ id: id });
            var appointmentView = new AppointmentView({ model: appointment });
            appointmentView.render();
            $('body').html(appointmentView.el);
            appointment.fetch();
        }
    }));

    $(function () { AppRouter.start() });


请不要被代码所淹没。如果你仔细观察,我就是一个菜鸟,这很简单。 我的问题是show动作没有被击中。但是index可以工作,并且可以使用视图填充页面。我尝试使用各种网址来点击show功能但不成功。有人可以告诉我我需要做些什么才能做到这一点?

0 个答案:

没有答案