Блог

Это простое приложение для выполнения задач, в котором в настоящее время отображается только несколько представлений li в представлении коллекции ul. Я пытаюсь вызвать событие щелчка для запуска простой функции showAlert

Если я наведу курсор мыши на одно из представлений задач (li) и обновлю страницу, чтобы моя мышь в конечном итоге зависала над этим конкретным li после перезагрузки, событие click отключит мою функцию showAlert.

Проблема в том, что как только я перемещаю мышь (скорее всего, вызывая событие наведения курсора мыши), я теряю событие щелчка во всех представлениях задач (li), включая представление, над которым я изначально зависал.

Основываясь на всех сообщениях, которые я смог найти, тесно связанных с этой проблемой, я пытался использовать this.delegateEvents() в разных местах, но безуспешно.

Предыдущий код

 (function() {

  window.App = {
    Models: {},
    Collections: {},
    Views: {}
  };

  window.template = function(id) {
    return _.template( $('#'   id).html() );
  };

  App.Models.Task = Backbone.Model.extend({});

  App.Collections.Tasks = Backbone.Collection.extend({
    model: App.Models.Task
  });

  App.Views.Tasks = Backbone.View.extend({
    tagName: 'ul',

    render: function() {
      this.collection.each(this.addOne, this);
      return this;
    },

    addOne: function(task) {
      var taskView = new App.Views.Task({ model: task });
      this.$el.append(taskView.render().el);
    }
  });
 

Это рассматриваемый вид

   App.Views.Task = Backbone.View.extend({
    tagName: 'li',

    events: {
      'click': 'showAlert'
    },

    showAlert: function() {
      alert('yes!');
    },

    render: function() {
      this.$el.html( this.model.get('title') );
      return this;
    }
  });
 

продолжающийся код

   var tasksCollection = new App.Collections.Tasks([
    {
      title: 'Task 1',
      priority: 3
    },
    {
      title: 'Task 2',
      priority: 4
    },
    {
      title: 'Task 3',
      priority: 5
    }
  ]);

  var tasksView = new App.Views.Tasks({ collection: tasksCollection });
  $('.tasks').html(tasksView.render().el);

})();