Backbone.View "el" Verwirrung

Wie soll mit einer Ansicht elumgegangen werden? Es muss eingestellt werden, sonst werden keine Ereignisse ausgelöst (siehe hier ).

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

In einer Ansicht el findet die gesamte Ereignisbindung statt. Sie müssen es nicht verwenden, aber wenn Sie möchten, dass das Backbone Ereignisse auslöst, müssen Sie Ihre Rendering-Arbeit am el ausführen. Eine Ansicht el ist ein DOM-Element, muss jedoch kein bereits vorhandenes Element sein. Es wird erstellt, wenn Sie keine von Ihrer aktuellen Seite ziehen, aber Sie müssen sie in die Seite einfügen, wenn Sie jemals möchten, dass sie 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);
    }
});

In der ersten Ansicht werden nur die Listenelemente erstellt, und in der zweiten Ansicht werden sie tatsächlich auf der Seite platziert. Ich denke, das ist ziemlich ähnlich zu dem, was im ToDo-Beispiel passiert auf der backbone.js-Site . Ich denke, Konvention ist es, Sie Inhalt in die el zu machen. Das el dient also als Landeplatz oder Container zum Platzieren Ihrer Vorlageninhalte. Das Backbone bindet dann seine Ereignisse an die darin enthaltenen Modelldaten.

Wenn Sie eine Ansicht erstellen , können Sie die el in vier Möglichkeiten , mit manipulieren el:, tagName:, className:, und id:. Wenn keines davon deklariert ist, ist el standardmäßig ein Div ohne ID oder Klasse. Es ist zu diesem Zeitpunkt auch nicht mit der Seite verknüpft. Sie können das Tag mithilfe von tagName in etwas anderes ändern (z. B. erhalten tagName: "li"Sie ein el von <li></li>). Sie können die ID und Klasse von el ebenfalls festlegen. Trotzdem ist el kein Teil Ihrer Seite. Mit der Eigenschaft el können Sie das el-Objekt sehr feinkörnig bearbeiten. Die meiste Zeit benutze ich eineel: $("someElementInThePage")Dies bindet tatsächlich alle Manipulationen, die Sie an el in Ihrer Ansicht vornehmen, an die aktuelle Seite. Wenn Sie andernfalls sehen 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 beim Rendern). Ich stelle mir el gerne als den Container vor, den all Ihre Ansichten manipulieren.

Jetzt etwas alt, aber ich war auch verwirrt, und für andere Leute, die hierher kommen, könnte diese Geige helfen - 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();
});

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.