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

Ответ 1

Представления 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 служит местом посадки или контейнером для размещения вашего шаблонного контента. Backbone затем связывает свои события с данными модели внутри него.

Когда вы создаете представление, вы можете управлять элом четырьмя способами, используя el:, tagName:, className: и id:. Если ни один из них не объявлен el по умолчанию для div без id или класса. На данный момент он также не связан со страницей. Вы можете изменить тег на что-то другое, используя tagName (например, tagName: "li", вы получите el из <li></li>). Вы можете установить id и класс el аналогично. Still el не является частью вашей страницы. Свойство el позволяет вам делать очень мелкие манипуляции с объектом el. В большинстве случаев я использую el: $("someElementInThePage"), который фактически связывает все манипуляции, которые вы делаете с el в своем представлении, на текущую страницу. В противном случае, если вы хотите увидеть всю сложную работу, которую вы сделали в своем представлении, появится на странице, вам нужно будет вставить/добавить ее на страницу где-то еще в вашем представлении (возможно, в рендере). Мне нравится думать о том, что в качестве контейнера используется все ваше представление.

Ответ 2

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

Ответ 3

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