Backbone.View zamieszanie „el”


97

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?


11
Pomyślałem - tylko ja się tym bawię el.
Yugal Jindle

eljest jak gf. nikt nie może ich w pełni zrozumieć.
Mahi

Odpowiedzi:


121

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.


Dzięki za wyjaśnienie i przykład! Myślę, że nie zawsze jest jasne, jakie powinno być el w określonych sytuacjach i programista musi to „wyczuć”. Twoje wyjaśnienia z pewnością pomogły! Jedno pytanie: nie definiujesz el w swoim ItemView, ale uzyskujesz do niego dostęp w funkcji renderowania. Czy to zadziała? Czy istnieje jakiś domyślny el, jeśli go wyraźnie nie zdefiniujesz?
Manuel Meurer

3
Domyślnie el jest znacznikiem „div” bez identyfikatora ani klasy. Jest to obiekt DOM niezwiązany z DOM Twojej strony. Zwykle wstawiam / dołączam go do strony w funkcji renderowania lub funkcji renderowania widoku nadrzędnego.
LeRoy,

Zaktualizowałem moją odpowiedź o opis właściwości definiujących el.
LeRoy,

5
Wydaje mi się, że jedynym problemem związanym z chwytaniem istniejącego elementu za pomocą el: $ ("# someElementID") jest to, że Twój widok prawdopodobnie wie więcej niż powinien, co utrudnia jego ponowne użycie. zobacz „Oddziel widok od DOM ...” coenraets.org/blog/2012/01/…
Scott Coates

@scoarescoare, ponieważ dodajesz właściwość el podczas tworzenia instancji, sam widok w rzeczywistości nie wie więcej niż powinien, pozostaje modułowy i może przyjmować dowolne $ (el), które chcesz mu przekazać. Więc to naprawdę sprawia, że ​​jest całkiem wielokrotnego użytku.
Metagrapher

6

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

Podążałem za tym modelem i żałuję, że tego nie zrobiłem. Aby zniszczyć widok i usunąć powiązania, przyjęto konwencję view.remove (). To niszczy $ el i usuwa go z DOM, więc kiedy musisz ponownie pokazać widok, $ el nie istnieje.
JJ

@Zaznacz, co jeśli używam architektury kompozytowej, takiej jak marionetka ... czy nadal potrzebuję ele widoku?
afr0,

Twój kod skrzypcowy nie działa, ponieważ link powinien być jsfiddle.net/hRndn
Izzy

@Mahi Tak, masz rację. Przepraszam, prawdopodobnie wkleiłem zły link. Ten działa: jsfiddle.net/hRndn/127
Izzy

1

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”.


Hmm, to też nie wyjaśnia sprawy. W większości przypadków elementy, które mogą wywołać zmianę w moim widoku, znajdują się wewnątrz szablonu, który renderuje widok, więc przed renderowaniem te elementy jeszcze nie istnieją.
Manuel Meurer
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.