Backbone.View "эль" путаница - PullRequest
Новая
       42

Backbone.View "эль" путаница

97 голосов
/ 11 апреля 2011

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

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

Ответы [ 3 ]

121 голосов
/ 22 апреля 2011

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

6 голосов
/ 26 марта 2013

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

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

...