Question

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

var app = app || {};

(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>

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

这有什么原因吗？

Answer 1

可能只是您的span标记未正确关闭：

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

在视图中的每个按钮上触发了骨干事件？

1 个答案: