Backbone. Lihat kebingungan "el"

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?

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.

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

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