1

我正在尝试学习一些 javascript，并且我已经阅读了几个教程，现在我正在尝试了解一个现实生活中的系统。这是一个很好的演示站点：

http://nodecellar.coenraets.org/

https://github.com/ccoenraets/nodecellar

我想我了解如何将事件分配给页面上的元素的基础知识，但是当我查看他的源代码时，我什至无法弄清楚第一次点击是如何工作的。当您单击“开始浏览”时，它应该以某种方式被 javascript 捕获，从而触发异步请求并触发视图随着接收到的数据而更改。但是在他的 /public/js/views/ 中没有任何地方插入事件捕获（除了在 itemdetail 视图中，但这完全是一个不同的视图）。

我还尝试使用 chrome 开发人员工具来捕捉点击并找出是什么脚本捕捉到了它。

  • 在源代码下，我尝试为 DOM 突变设置事件断点，然后单击....但没有断点（这怎么可能？肯定发生了 DOM 突变）

  • 然后我在元素下检查了“点击”事件侦听器，也没有看到任何显示的内容。

显然我不知道我在这里做什么。谁能帮我指出正确的方向？

4

1 回答 1

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();
});
于 2013-09-07T00:50:01.483 回答