Спинка. Перегляньте плутанину "el"

Як слід elобробляти подання ? Це має бути встановлено, інакше події не спрацьовують (див. Тут ).

Але чи повинен це бути елемент, який вже є на сторінці? У своєму додатку я перетворюю шаблон (шаблони jQuery) у Fancybox. Що повинно elбути в такому випадку?

Подання el - це те, де відбувається вся прив'язка події. Вам не потрібно його використовувати, але якщо ви хочете, щоб магістраль запускала події, вам потрібно зробити свою роботу з рендерингом на el. Подання el - це елемент DOM, але він не повинен бути попередньо існуючим. Він буде створений, якщо ви не витягнете його зі своєї поточної сторінки, але вам доведеться вставити його на сторінку, якщо ви хочете бачити, як вона робить щось.

Приклад: у мене є вид, який створює окремі елементи

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

Перший вигляд просто створює елементи списку, а другий перегляд фактично розміщує їх на сторінці. Я думаю, це досить схоже на те, що відбувається в прикладі ToDo на сайті backbone.js. Я думаю, що умовою є передати вам вміст в ель. Тож ель служить місцем посадки або контейнером для розміщення шаблону. Потім магістраль прив'язує свої події до даних моделі всередині нього.

При створенні вистави можна маніпулювати ел чотирма способами , використовуючи el:, tagName:, className:і id:. Якщо жодне з них не оголошено el за замовчуванням є div без ідентифікатора або класу. У цей момент він також не пов’язаний зі сторінкою. Ви можете змінити тег на щось інше, використовуючи tagName (наприклад tagName: "li", це дасть вам змогу <li></li>). Ви також можете встановити ідентифікатор та клас el. Все-таки el не є частиною вашої сторінки. Властивість el дозволяє виконувати дуже дрібні маніпуляції із зерном об’єкта el. Більшу частину часу я використовуюel: $("someElementInThePage")який фактично пов'язує всі маніпуляції, які ви робите, у вашому поданні до поточної сторінки. В іншому випадку, якщо ви хочете, щоб уся важка робота, яку ви зробили у своєму огляді, відображалася на сторінці, вам потрібно буде вставити / додати її на сторінку десь ще у вашому перегляді (можливо, у візуалізації). Мені подобається думати про el як про контейнер, яким маніпулює весь ваш погляд.

Трохи старий зараз, але я також розгубився, і тому для інших людей, які потрапляють сюди, ця скрипка може допомогти - 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();
});

Ви хочете, щоб ваш 'el' посилався на елемент, який містить дочірній елемент, який має будь-яку подію, яка викликає зміну у вашому погляді. Може бути таким широким, як тег "body".