Backbone-rebinding-events auf einen Blick

Ich habe zwei Blicke, eine stellt eine Sicht der Klienten und der andere ist für die einzelnen client-Ansichten. Ich bin verbindlich, die mouseenter und mouseleave Veranstaltungen in der client-Ansicht um die fade in-und out-overlay auf dem Bild. Dies funktioniert gut, wenn es von selbst. Allerdings bin ich auch mit einem jQuery-plugin zu tun, einem Karussell-Effekt (plugin hier). Sobald das aktiviert ist, können Sie eigene benutzerdefinierte Ereignisse nicht mehr arbeiten. Gibt es eine Möglichkeit, die ich delegieren kann die Client-Ansicht-events, nachdem das plugin initialisiert wird? Dies ist mein erstes mal mit Rückgrat, so könnte ich etwas anderes falsch als gut.

Hier ist der code:

//Client View
window.ClientView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($("#client-template").html()),
  className: 'client-thumb',

  events: {
    "mouseenter": "fadeOutOverlay",
    "mouseleave": "fadeInOverlay"
  },

  initialize: function() {
  },

  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  },

  fadeOutOverlay: function() {
    $(this.el).find(".slider-image-overlay").fadeOut('fast');
  },

  fadeInOverlay: function() {
    $(this.el).find(".slider-image-overlay").fadeIn('fast');
  }

});

//Clients View
window.ClientsView = Backbone.View.extend({
  el: "#clients",

  initialize: function() {
    this.collection.bind('all', this.render, this);
  },

  render: function() {
    var $clients = $("<ul class='clearfix'></ul>");
    _.each(this.collection.models, function(client) {
      var view = new ClientView({model: client});
      $clients.append(view.render().el);
    });

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel();

    return this;
  }
});

BEARBEITEN: Hier bin ich versucht zu delegateEvents() auf die Ansichten, die erstellt wurden (diejenigen, die die Ereignisse auf Sie):

App.View.ClientsView = Backbone.View.extend({
  el: "#clients",

  initialize: function() {
    this.collection.bind('all', this.render, this);
  },

  render: function() {
    var $clients = $("<ul class='clearfix'></ul>");
    var views = [];
    _.each(this.collection.models, function(client) {
      var view = new App.View.ClientView({model: client});
      views.push(view); //Store created views in an array...
      $clients.append(view.render().el);
    });

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel({
      //Use the plugin's callback to try to delegate events again
      afterCreateFunction: function() {
        _.each(views, function(view){
          view.delegateEvents();
        });
      }
    });

    return this;
  }
});

Versuchte dies aber nicht zu funktionieren scheint? Mache ich es richtig? Ich denke, dass das plugin tut mehr, als denke ich an die DOM. Es sieht aus wie es ist rührend, die Elemente, die ich bin versucht zu binden, sowie die Bindung an mouseenter und mouseleave. Ich bin nicht vertraut mit diesem plugin, sieht nicht aus wie es hat eine unminified-version, damit ich es nicht Lesen kann, zu gut.

Irgendwelche anderen Vorschläge?

  • Kann sein das ich falsch bin, aber Sie haben nicht jede Veranstaltung an Ihre ClientsView
  • wenn Sie, die dont pass ein Selektor, um das Event-Objekt-Ereignisse gebunden sind, zu der Ansicht element
InformationsquelleAutor Brandon | 2012-02-21
Schreibe einen Kommentar