在 Backbone 中，如何在列表项中的锚标记上获取单击事件

问题描述

在渲染函数内的主干视图中，我有一个锚标记，其中包含一个无序列表内的列表项。总之

var DemoView = Backbone.View.extend({
  el: '#body',render: function() {
    this.$('sidebar-nav > ul').append($('<li class="divider"></li>'));
    this.$('.sidebar-nav > ul')
      .append($('<li><a href="' + _.path(Overture.contextpath,'/calendars/',this.controller.model.id,'/preview') + '" class="internal-link">Link 1</a></li>'));
    this.$('.sidebar-nav > ul')
        .append($('<li><a href="#" class="internal-link">Link 2</a></li>'));
  } 
});

我想在点击链接 2 时打开一个警告框，而无需导航到其他页面。

解决方法

您可以设置视图的 events：

var DemoView = Backbone.View.extend({
  el: '#body',events: {
    'click .alert-link': onAlertLinkClick
  },onAlertLinkClick: function() {
     // put your alert code here
  },render: function() {
    this.$('sidebar-nav > ul').append($('<li class="divider"></li>'));
    this.$('.sidebar-nav > ul')
      .append($('<li><a href="' + _.path(Overture.contextPath,'/calendars/',this.controller.model.id,'/preview') + '" class="internal-link">Link 1</a></li>'));
    this.$('.sidebar-nav > ul')
        .append($('<li><a href="#" class="internal-link alert-link">Link 2</a></li>'));
  } 
});

当然，您必须将 alert-link 添加到第二个锚点才能选择它。

See docs 了解更多信息。