javascript - 了解 Backbone 和 Express 中的点击事件

标签 javascript backbone.js

我正在尝试学习一些 JavaScript,并且已经学习了几个教程,现在我正在尝试了解现实生活中的系统。这是一个精心制作的演示网站:

http://nodecellar.coenraets.org/

https://github.com/ccoenraets/nodecellar

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

我还尝试使用 Chrome 开发者工具来捕获点击并找出是什么脚本捕获了它。

  • 在源下,我尝试为 DOM 突变设置事件断点,然后单击...但没有断点(这怎么可能?肯定发生了 DOM 突变)

  • 然后,我在元素下检查了“click”事件监听器,也没有看到任何内容。

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

最佳答案

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

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

路由配置在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();
});

关于javascript - 了解 Backbone 和 Express 中的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18667936/

相关文章:

javascript - require.js + backbone.js : How to structure modules that have an initialize function?

javascript - 在嵌套集合的模型中设置 Backbone 属性

javascript - 如何在 JS 表单和 onSubmit 中使用值。我需要提交按钮吗?

javascript - 在谷歌应用脚​​本中获取选定的值

javascript - 打开2个模态窗口js

django - 单页应用还是多页应用?

javascript - Chartjs实时图形x轴移动

javascript - 基于 ${copyrightYear} 增加日期

javascript - 用于 Backbone.js 的 Visual Studio Intellisense

jQuery 和 Underscore 未在 RequireJS 中加载