了解主干和快递中的点击事件

Understanding click events in Backbone and Express

本文关键字：事件 快递 了解      更新时间：2023-09-26

我正在尝试学习一些javascript，我已经完成了几个教程，现在我正在尝试理解现实生活中的系统。这是一个已经很好地组合在一起的演示站点：

http://nodecellar.coenraets.org/

https://github.com/ccoenraets/nodecellar

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

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

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

    • 然后，我在元素下进行了检查

  • ，并在"click"事件侦听器下进行了检查，也没有看到任何显示的内容。

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

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

它基本上是使用哈希标签并侦听位置更改事件来触发页面更新。

路由配置在 main.js：

请参阅：骨干网.路由器了解更多信息。

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