Backbone.View "el" путаница

Как следует elобрабатывать представление? Его нужно установить, иначе события не сработают (см. Здесь ).

Но должен ли это быть элемент, который уже есть на странице? В своем приложении я визуализирую шаблон (jQuery Templates) в Fancybox. Что должно 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. Таким образом, el служит местом посадки или контейнером для размещения вашего шаблонного контента. Затем Backbone связывает свои события с данными модели внутри него.

При создании представления можно манипулировать эл четырьмя способами , используя el:, tagName:, className:и id:. Если ничего из этого не объявлено, по умолчанию используется div без идентификатора или класса. На данный момент он также не связан со страницей. Вы можете изменить тег на что-нибудь другое, используя tagName (например tagName: "li", даст вам el of <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".