Backbone. Lihat kebingungan "el"


97

Bagaimana cara elmenangani view ? Ini harus disetel, jika tidak, peristiwa tidak akan diaktifkan (lihat di sini ).

Tetapi apakah itu adalah elemen yang sudah ada di halaman? Di aplikasi saya, saya membuat template (jQuery Templates) menjadi Fancybox. Apa yang harus elterjadi dalam kasus itu?


11
Saya pikir - saya satu-satunya yang mengotak-atik elhal itu.
Yugal Jindle

elseperti gf. tidak ada yang bisa memahami mereka sepenuhnya.
Mahi

Jawaban:


121

A views el adalah tempat semua event binding berlangsung. Anda tidak harus menggunakannya tetapi jika Anda ingin backbone untuk mengaktifkan peristiwa, Anda perlu melakukan pekerjaan rendering di el. A views el adalah elemen DOM tetapi tidak harus elemen yang sudah ada sebelumnya. Ini akan dibuat jika Anda tidak menariknya dari halaman Anda saat ini, tetapi Anda harus memasukkannya ke dalam halaman jika Anda ingin melihatnya melakukan sesuatu.

Contoh: Saya memiliki tampilan yang membuat item individual

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

Tampilan pertama hanya membuat item daftar dan tampilan kedua benar-benar menempatkannya di halaman. Saya rasa ini sangat mirip dengan apa yang terjadi pada contoh ToDo di situs backbone.js. Saya pikir konvensi adalah membuat Anda puas ke el. Jadi el berfungsi sebagai tempat pendaratan atau wadah untuk menempatkan konten template Anda. Backbone kemudian mengikat event-nya ke data model di dalamnya.

Ketika Anda membuat tampilan Anda dapat memanipulasi el dalam empat cara menggunakan el:, tagName:, className:, dan id:. Jika tidak ada yang dideklarasikan el default ke div tanpa id atau class. Itu juga tidak terkait dengan halaman pada saat ini. Anda dapat mengubah tag menjadi sesuatu yang lain dengan menggunakan tagName (misalnya tagName: "li", akan memberi Anda el of <li></li>). Anda juga dapat mengatur id dan kelas el. Still el bukan bagian dari halaman Anda. Properti el memungkinkan Anda melakukan manipulasi butiran yang sangat halus pada objek el. Sebagian besar waktu saya menggunakan fileel: $("someElementInThePage")yang sebenarnya mengikat semua manipulasi yang Anda lakukan terhadap tampilan Anda ke halaman saat ini. Jika tidak, jika Anda ingin melihat semua kerja keras yang telah Anda lakukan dalam tampilan Anda muncul di halaman, Anda perlu memasukkan / menambahkannya ke halaman di tempat lain dalam tampilan Anda (mungkin dalam render). Saya suka menganggap el sebagai wadah yang dimanipulasi oleh semua pandangan Anda.


Terima kasih atas klarifikasi dan contohnya! Saya pikir tidak selalu jelas apa yang harus dilakukan el dalam situasi tertentu dan pengembang harus "merasakan" untuk itu. Penjelasan Anda pasti membantu! Satu pertanyaan, meskipun: Anda tidak mendefinisikan el di ItemView Anda, tetapi Anda mengaksesnya di fungsi render. Akankah ini berhasil? Apakah ada semacam el default jika Anda tidak secara eksplisit mendefinisikannya?
Manuel Meurer

3
Secara default el adalah tag "div" tanpa id atau kelas. Ini adalah objek DOM yang tidak terikat ke DOM laman Anda. Biasanya saya menyisipkan / menambahkannya ke halaman dalam fungsi render atau fungsi render tampilan induk.
LeRoy

Memperbarui jawaban saya dengan beberapa deskripsi tentang properti yang mendefinisikan el.
LeRoy

5
Saya kira satu-satunya masalah saya dengan mengambil elemen yang sudah ada sebelumnya dengan el: $ ("# someElementID") adalah pandangan Anda mungkin tahu lebih dari yang seharusnya, sehingga sulit untuk menggunakannya kembali. lihat "Pisahkan tampilan dari DOM ..." coenraets.org/blog/2012/01/…
Scott Coates

@scoarescoare karena Anda menambahkan properti el pada instantiation, tampilan itu sendiri sebenarnya tidak tahu lebih dari yang seharusnya, ia tetap modular dan dapat menerima $ (el) apa pun yang Anda inginkan. Jadi ini membuatnya cukup dapat digunakan kembali, sungguh.
Metagrapher

6

Agak tua sekarang, tapi saya juga bingung, jadi bagi orang lain yang sampai di sini, biola ini mungkin bisa membantu - 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();
});

Saya telah mengikuti model ini dan berharap saya tidak melakukannya. Untuk menghancurkan tampilan dan menghapus binding, konvensi backbone adalah view.remove (). Itu menghancurkan $ el dan menghapusnya dari DOM, jadi saat Anda perlu menampilkan tampilan lagi, $ el tidak ada.
JJ

@ Tandai apa Jika saya menggunakan arsitektur komposit seperti marionette .... apakah saya masih perlu memiliki view's el?
afr0

kode biola Anda tidak berfungsi, karena tautan seharusnya jsfiddle.net/hRndn
Izzy

@Mahi Ya kamu benar. Saya mungkin menempelkan tautan yang salah, maaf. Yang ini berhasil: jsfiddle.net/hRndn/127
Izzy

1

Anda ingin 'el' merujuk pada elemen yang berisi elemen turunan yang memiliki peristiwa apa pun yang memicu perubahan dalam tampilan Anda. Bisa selebar tag "body".


Hmm, itu juga tidak terlalu jelas. Sering kali elemen yang dapat memicu perubahan dalam tampilan saya berada di dalam template yang dirender tampilan, jadi sebelum dirender, elemen ini belum ada.
Manuel Meurer
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.