backbone.js - 在视图中的每个按钮上触发主干事件？

Question

我在这里看到了一个非常简单的 Backbone.View：

var 应用程序 = 应用程序 || {};

(function($) {
  'use strict';

  app.HomeView = Jr.View.extend({
    template: Handlebars.compile($('#home-view').html()),
    events: {
      'click #show-workouts-list': 'showWorkouts',
      "click #clear-localstorage": "clearLocalStorage"
    },
    initialize: function() {

    },
    render: function() {
      this.$el.html(this.template({ numberOfWorkouts: this.collection.length }));
      return this;
    },
    showWorkouts: function() {
      console.log('show workouts');
      var workoutsView = new app.WorkoutsView();
      app.Router.renderView(workoutsView);

      /* cleanup the view after we move away */
      this.remove();
    },
    clearLocalStorage: function(event) {
      console.log('cleared localstorage');
      localStorage.clear();
    }
  });

})(Zepto);

和模板：

<script id="home-view" type="text/x-handlebars-template">
  <header class="bar-title">
   <div class="header-animated">
     <h1 class="title">robus</h1>
    </div>
  </header>
  <div class="content content-padded">
    <ul class="list inset">
      <li>
        <a id="show-workouts-list" href="#workouts">
          <strong>Workouts</strong>
          <span class="chevron"></span>
          <span class="count">{{ numberOfWorkouts }}</span
        </a>
      </li>
    </ul>
    <div id="clear-localstorage" class="button button-block button-negative">Clear localStorage</div>
  </div>
</script>

当我单击“清除 localStorage”按钮时，该showWorkouts()函数也被触发，即使我在事件块中声明了特定的 ID。该clearLocalStorage()函数也被触发。

这有什么原因吗？

Answer 1

可能只是您有一个未正确关闭的 span 标签：

<span class="count">{{ numberOfWorkouts }}</span