了解Backbone和Express中的点击事件

Question

I am trying to learn some javascript and I've gone through several tutorials, now I'm trying to understand a real-life system. Here is a demo site that has been pretty well put together:

http://nodecellar.coenraets.org/

https://github.com/ccoenraets/nodecellar

I think I understand the basics of how events can be assigned to elements on the page but then when I look through his source code I can't figure out how even the first click works. When you click "Start Browsing" it should be caught by javascript somehow which fires off an asynchronous request and triggers the view to change with the data received. But in his / public/js/views/ nowhere is there event catching plugged in (except in the itemdetail view but that's a different view entirely).

I also tried using chrome developer tools to catch the click and find out what script caught it.

• Under sources I tried setting an event breakpoint for DOM mutation and then clicked.... but no breakpoint (how is that possible? There's definitely a DOM mutation happening)

• I then went under elements and checked under the "click" event listener and didn't see anything revealing there either.

Obviously I don't know what I'm doing here. Can anyone help point me in the right direction?

Answer 1

This app is using backbones routing capabilities to switch contexts.

It is basically using hash tags and listening for location change events to trigger updates to the page.

The routing configuration is in main.js:

See: Backbone.Router for more information.

Code Reference: http://nodecellar.coenraets.org/#wines

var AppRouter = Backbone.Router.extend({

    routes: {
        ""                  : "home",
        "wines" : "list",
        "wines/page/:page"  : "list",
        "wines/add"         : "addWine",
        "wines/:id"         : "wineDetails",
        "about"             : "about"
    },

    initialize: function () {
        this.headerView = new HeaderView();
        $('.header').html(this.headerView.el);
    },

    home: function (id) {
        if (!this.homeView) {
            this.homeView = new HomeView();
        }
        $('#content').html(this.homeView.el);
        this.headerView.selectMenuItem('home-menu');
    },

    list: function(page) {
        var p = page ? parseInt(page, 10) : 1;
        var wineList = new WineCollection();
        wineList.fetch({success: function(){
            $("#content").html(new WineListView({model: wineList, page: p}).el);
        }});
        this.headerView.selectMenuItem('home-menu');
    },

    // etc...

});

utils.loadTemplate(['HomeView', 'HeaderView', 'WineView', 'WineListItemView', 'AboutView'], function() {
    app = new AppRouter();
    Backbone.history.start();
});