Backbone.js hover-Ereignis nicht ausgelöst

Ich versuche zu verwenden Backbone.js für das erste mal und ich habe einige Schwierigkeiten. Ich weiß nicht, ob mein problem ist, dass ich nicht verstehen, wie backbone funktionieren soll oder ob es nur ein code-problem.

Ich versuche zu schaffen, die ein dynamisches Menü, und ich habe kein problem, erstellen Sie die Menüleiste mit den Punkten, aber ich kann nicht das hover-Ereignis auslösen, wenn ich hover eine der Menüoptionen.

Ansichten

var MenuView = Backbone.View.extend({
    initialize: function(items) {
        this.menu = items;
        //Main navigation bar
        this.el = $("#main-nav");
        this.trigger('start');
        this.render();
    },
    render: function() {
        var me = this;
        _.each(this.menu, function(mi) {
            mi.render(me.el);
        });
        return this;
    },
    handleHover: function(e) {
        console.debug(e);
    }
});

var MenuItemView = Backbone.View.extend({
    tagName: 'li',
    className:'menu-item',
    events: { //none of these work
        'hover a':'handleHover',
        'mouseover a':'handleHover',
        'mouseover':'handleHover',
        'click': 'handleHover',
        'click a': 'handleHover'
    },
    initialize: function(mi) {
        this.menuItem = mi;
        this.el = $("<li class=\"menu-item\"></li>")
    }, 
    render: function(parent) {
        this.el.append('<a href="' + this.menuItem.get("link") + '">' + this.menuItem.get("text") + '</a>');
        parent.append(this.el);
        return this;
    },

    handleHover: function(ev) {
        console.debug("Hovering! " + ev + this.menuItem.get("cid"));
        console.debug(ev);
        return false;
    }
});

Modell

var MenuItem = Backbone.Model.extend({
    defaults: {
        parent: null,
        children: [],
        link: "",
        text: ""
    }   
});

Startup-code

$(document).ready(function() {
    var menu = new MenuView([
        new MenuItemView( new MenuItem({link: "/", text: "Home"})),
        new MenuItemView( new MenuItem({link: "/", text: "Users"})),
        new MenuItemView( new MenuItem({link: "/", text: "Configuration"}))
    ]);
});

Jede Hilfe wird dankbar sein!

Dank!

Update

Ok, nach der Einnahme der definition von el außerhalb der initialize Methode auf die MenuItemView Ansicht, es funktioniert, ABER das gleiche element wird erneut auf alle Instanzen der Ansicht, so hatte ich, um die Ansicht zu ändern, um Sie den folgenden code, um zu arbeiten, wie ich es möchte:

 var MenuItemView = Backbone.View.extend({

    events: { //none of these work
        'hover a':'handleHover',
        'mouseover a':'handleHover',
        'mouseover':'handleHover',
        'click': 'handleHover',
        'click a': 'handleHover'
    },
    el: $('<li class="menu-item"></li>'),
    initialize: function(mi) {
        this.menuItem = mi;
        this.el = $(this.el).clone(true);
    }, 
    render: function(parent) {
        this.el.append('<a href="' + this.menuItem.get("link") + '">' + this.menuItem.get("text") + '</a>');
        parent.append(this.el);
        return this;
    },

    handleHover: function(ev) {
        console.debug("Hovering! " + ev + this.menuItem.get("cid"));
        console.debug(ev);
        return false;
    }
});

Wny muss ich clone das element auf eine neue Instanz?

Warum haben Sie beim Klonen der el? Berücksichtigen, wenn $('<li class="menu-item"></li>') ausgewertet wird, und Sie haben Ihre Antwort.
wenn ich das element für el auf die initialize - Methode, dann werden die Ereignisse nicht ausgelöst, wie kann ich das lösen?

InformationsquelleAutor Deleteman | 2012-01-19

Re: "Warum muss ich clone das element auf eine neue Instanz?"

Das zugrunde liegende problem ist hier richtig:

var MenuItemView = Backbone.View.extend({
    //...
    el: $('<li class="menu-item"></li>'),

Den $('<li class="menu-item"></li>') Aufruf ausgeführt wird, wenn MenuItemView definiert wird, so dass Sie am Ende nur noch ein $('<li>') gemeinsam von allen Instanzen MenuItemView.

Wenn Sie die el innen initialize oder render dann müssen Sie binden die Ereignisse von hand mit delegateEvents:

Standardmäßig delegateEvents heißt innerhalb des View-Konstruktor für Sie [...]

Also, wenn Sie erstellen this.el selbst dann wirst du rufen this.delegateEvents() selbst. Zum Beispiel:

var MenuItemView = Backbone.View.extend({
    //...
    render: function() {
        this.el = $('<li class="menu-item"><a>' + this.cid + '</a></li>');
        this.delegateEvents();
        return this;
    },
    //...
});

Demo: http://jsfiddle.net/ambiguous/RPqMh/2/

Jedoch, wenn Sie clone Ihre this.el mit der withDataAndEvents Flagge sind, dann sollten Sie in Ordnung sein:

var MenuItemView = Backbone.View.extend({
    el: $('<li class="menu-item"></li>'),
    //...
    initialize: function() {
        this.el = this.el.clone(true);
        this.el.append('<a>' + this.cid + '</a>');
    }, 
    //...
});

Demo: http://jsfiddle.net/ambiguous/hCW3F/1/

Aber wenn Sie nur this.el.clone() funktioniert es nicht, weil die delegieren nicht an die Klon:

var MenuItemView = Backbone.View.extend({
    el: $('<li class="menu-item"></li>'),
    //...
    initialize: function() {
        this.el = this.el.clone();
        this.el.append('<a>' + this.cid + '</a>');
    }, 
    //...
});

Demo: http://jsfiddle.net/ambiguous/KZNPA/

Aber wenn Sie fügen Sie Ihre eigenen delegateEvents nennen, du wirst in Ordnung sein:

var MenuItemView = Backbone.View.extend({
    el: $('<li class="menu-item"></li>'),
    //...
    initialize: function() {
        this.el = this.el.clone();
        this.el.append('<a>' + this.cid + '</a>');
    },
    render: function() {
        this.delegateEvents();
        return this;
    },
    //...
});

Demo: http://jsfiddle.net/ambiguous/KZNPA/1/

Vielen Dank für die Erklärung! Es machte die ganze Sache für mich 🙂
Ich musste sicherstellen, dass ich hatte es ganz klar in meinem eigenen Kopf zuerst, so teilte ich mir meine Notizen 🙂

InformationsquelleAutor mu is too short

10

schweben ist kein normales event, sondern ein "Komfort" - Veranstaltung zur Verfügung gestellt von jquery. Es ist eine Kombination von mouseenter und mouseleave.

Bindung an mouseenter-und mouseleave-statt der hover wird tun, was Sie brauchen.

InformationsquelleAutor Chris Aitchison
2

Scheint es mir, dass Sie nicht brauchen, diese Eigenschaften:
```
tagName: 'li',
className:'menu-item'
```
in MenuItemView wenn Sie angeben this.el = $('<li class="menu-item"></li>');

Ja, dieser code wurde Hinzugefügt während der Tests nur um zu überprüfen, ob das wird mein problem lösen, aber das ist es nicht....
Ja, ich habe auch überprüft. Nicht beheben konnte. Sowieso statt tagName und className definieren direkt el: $('<li class="menu-item"></li>') und es sollte funktionieren.
Ja, die Definition el außerhalb der initialize Methode funktioniert (irgendwie), aber das gleiche element wird erneut auf jede Instanz des view. Ich Schreibe ein update, um zu zeigen, dass Sie...
Hm, das ist interessant.. ich sehe das problem. Jetzt kann ich nur sagen, dass die Erstellung der Instanz wie das var menu = new MenuItemView({el: $("<li class='menu-item'></li>")}); scheint zu funktionieren wie gedacht.
Und btw, würden Sie besser verwenden Sie nur tagName: 'li', className: 'menu-item'. es funktioniert auch.

InformationsquelleAutor dfsq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.