webentwicklung-frage-antwort-db.com.de

Backbone.View "el" Verwirrung

Wie soll das el einer Ansicht behandelt werden? Es muss gesetzt sein, sonst werden Ereignisse nicht ausgelöst (siehe hier ).

Aber sollte es ein Element sein, das sich bereits auf der Seite befindet? In meiner App rendere ich eine Vorlage (jQuery Templates) in eine Fancybox. Was soll das el in diesem Fall sein?

97
Manuel Meurer

In einem Views el findet die gesamte Eventbindung statt. Sie müssen es nicht verwenden, aber wenn Sie möchten, dass das Backbone Ereignisse auslöst, müssen Sie Ihre Rendering-Arbeit auf dem EL ausführen. Ein views el ist ein DOM-Element, es muss jedoch kein bereits vorhandenes Element sein. Es wird erstellt, wenn Sie keines von Ihrer aktuellen Seite abrufen. Sie müssen es jedoch in die Seite einfügen, wenn Sie jemals möchten, dass es etwas bewirkt.

Ein Beispiel: Ich habe eine Ansicht, die einzelne Elemente erstellt

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

Die erste Ansicht erstellt nur die Listenelemente und die zweite Ansicht platziert sie tatsächlich auf der Seite. Ich denke, das ist ziemlich ähnlich zu dem, was in ToDo-Beispiel auf der backbone.js-Site passiert. Ich denke, Konvention ist es, Sie Inhalt in die EL zu machen. Das el dient also als Landeplatz oder Container für die Platzierung Ihrer Vorlageninhalte. Das Backbone bindet dann seine Ereignisse an die darin enthaltenen Modelldaten.

Wenn Sie eine Ansicht erstellen, können Sie die el mit el:, tagName:, className: Und id: Auf vier Arten bearbeiten. Wenn keines von diesen deklariert wird, ist el standardmäßig ein div ohne id oder class. Sie ist an dieser Stelle auch nicht mit der Seite verknüpft. Sie können das Tag durch Verwenden von tagName in etwas anderes ändern (z. B. tagName: "li" Gibt Ihnen ein el von <li></li>). Sie können die ID und die Klasse von el ebenfalls festlegen. El ist immer noch nicht Teil Ihrer Seite. Mit der el-Eigenschaft können Sie das el-Objekt sehr feinkörnig bearbeiten. Meistens verwende ich eine el: $("someElementInThePage"), die tatsächlich alle Manipulationen, die Sie in Ihrer Ansicht vornehmen, an die aktuelle Seite bindet. Andernfalls, wenn Sie möchten, dass all die harte Arbeit, die Sie in Ihrer Ansicht geleistet haben, auf der Seite angezeigt wird, müssen Sie sie an einer anderen Stelle in Ihrer Ansicht einfügen/an die Seite anhängen (wahrscheinlich im Render-Modus). Ich stelle mir el gerne als den Container vor, den alle Ihre Ansichten manipulieren.

121
LeRoy

Jetzt ein bisschen alt, aber ich war auch verwirrt, und so könnte diese Geige für andere Leute, die hierher kommen, hilfreich sein - http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});
6
Mark

Sie möchten, dass Ihr 'el' auf ein Element verweist, das ein untergeordnetes Element enthält, das ein Ereignis enthält, das eine Änderung in Ihrer Ansicht auslöst. Könnte so breit sein wie ein "body" -Tag.

1
joshvermaire