Позвоночник.Смотреть "Эль" путаница

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

но должен ли это быть элемент, который уже находится на странице? В моем приложении я визуализирую шаблон (jQuery Templates) в Fancybox. Что должно быть el быть в этом случае?

3 96
javascript backbone.js backbone-views

3 ответа:

a views el-это место, где происходит привязка всех событий. Вам не нужно его использовать, но если вы хотите, чтобы backbone запускал события, вам нужно выполнить свою работу по рендерингу на 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 пример на хребет.сайт js. Я думаю, что конвенция должна передать вам контент в el. Таким образом, el служит местом посадки или контейнером для размещения вашего шаблонного контента. Затем Backbone связывает свои события с данными модели внутри него.

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

118

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

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

1