Question

我正在尝试学习一些javascript，并且我已经完成了几个教程，现在我试图了解一个真实的系统。这是一个非常好的演示网站：

http://nodecellar.coenraets.org/

https://github.com/ccoenraets/nodecellar

我想我理解如何将事件分配给页面上的元素的基础知识，但是当我浏览他的源代码时，我无法弄清楚即使是第一次点击也是如此。当您点击＆＃34;开始浏览＆＃34;它应该被javascript以某种方式捕获，它触发异步请求并触发视图随接收到的数据而改变。但是在他的/ public / js / views /中没有插入事件（除了在itemdetail视图中，但完全不同的视图）。

我还尝试使用chrome开发人员工具来捕获点击并找出捕获它的脚本。

根据消息来源，我尝试为DOM变异设置一个事件断点，然后点击....但是没有断点（这怎么可能？肯定会发生DOM突变）
然后我去了元素并检查了＆＃34;点击＆＃34;事件倾听者并没有看到任何在那里发现的事情。

显然我不知道我在这做什么。任何人都可以帮助我指出正确的方向吗？

Answer 1

此应用使用主干路由功能来切换上下文。

它基本上使用哈希标记并侦听位置更改事件以触发对页面的更新。

路由配置位于main.js：

有关详细信息，请参阅：Backbone.Router。

代码参考：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();
});

了解Backbone和Express中的点击事件

1 个答案: