Backbone.View zamieszanie „el”

Jak należy postępować z widokiem el? Musi być ustawiony, w przeciwnym razie zdarzenia nie będą uruchamiane (patrz tutaj ).

Ale czy powinien to być element, który jest już na stronie? W mojej aplikacji renderuję szablon (jQuery Templates) do Fancybox. Co powinno elbyć w takim przypadku?

Widoki el to miejsce, w którym odbywa się łączenie wszystkich wydarzeń. Nie musisz go używać, ale jeśli chcesz, aby kręgosłup wyzwalał zdarzenia, musisz wykonać renderowanie na el. Widoki el to element DOM, ale nie musi to być istniejący element. Zostanie utworzony, jeśli nie wyciągniesz go z bieżącej strony, ale będziesz musiał wstawić go na stronę, jeśli kiedykolwiek zechcesz zobaczyć, jak robi cokolwiek.

Przykład: mam widok, który tworzy poszczególne elementy

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);
    }
});

Pierwszy widok po prostu tworzy elementy listy, a drugi widok faktycznie umieszcza je na stronie. Myślę, że jest to bardzo podobne do tego, co dzieje się w przykładzie ToDo w witrynie backbone.js. Myślę, że konwencja polega na tym, żebyś był zadowolony z el. Więc el służy jako miejsce lądowania lub pojemnik do umieszczania zawartości szablonu. Następnie Backbone wiąże swoje zdarzenia z danymi modelu w nim zawartymi.

Po utworzeniu widoku można manipulować el na cztery sposoby korzystania el:, tagName:, className:, i id:. Jeśli żaden z nich nie jest zadeklarowany, el przyjmuje domyślnie element div bez identyfikatora lub klasy. W tym momencie nie jest również powiązany ze stroną. Możesz zmienić tag na coś innego używając tagName (np. tagName: "li"Da ci el of <li></li>). Możesz również ustawić identyfikator i klasę el. Wciąż el nie jest częścią Twojej strony. Właściwość el pozwala na bardzo drobną manipulację ziarnem obiektu el. Przez większość czasu używam plikuel: $("someElementInThePage")co w rzeczywistości wiąże całą operację, którą wykonujesz, aby el w twoim widoku z bieżącą stroną. W przeciwnym razie, jeśli chcesz, aby cała ciężka praca, którą wykonałeś w swoim widoku, pojawiła się na stronie, będziesz musiał wstawić / dołączyć ją do strony w innym miejscu widoku (prawdopodobnie w renderowaniu). Lubię myśleć o el jako o pojemniku, którym manipuluje cały twój widok.

Trochę stary, ale też byłem zdezorientowany, więc dla innych osób, które tu dotarły, te skrzypce mogą pomóc - 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();
});

Chcesz, aby Twoja „el” odnosiła się do elementu zawierającego element podrzędny, który ma jakiekolwiek zdarzenie, które wywołuje zmianę w Twoim widoku. Może mieć szerokość tagu „body”.