Backbone.View "el" confusão

Como uma visualização deve elser tratada? Tem que ser definido, caso contrário, os eventos não disparam (veja aqui ).

Mas deveria ser um elemento que já está na página? No meu aplicativo, eu renderizo um modelo (modelos jQuery) em um Fancybox. Qual deve elser nesse caso?

Uma visão el é onde ocorre toda a associação de eventos. Você não precisa usá-lo, mas se quiser que o backbone dispare eventos, você precisa fazer seu trabalho de renderização no el. A views el é um elemento DOM, mas não precisa ser um elemento pré-existente. Ele será criado se você não puxar um da página atual, mas você terá que inseri-lo na página se quiser que ele faça alguma coisa.

Um exemplo: tenho uma visão que cria itens individuais

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

A primeira visualização apenas cria os itens da lista e a segunda visualização realmente os coloca na página. Acho que é muito semelhante ao que acontece no exemplo ToDo no site backbone.js. Acho que a convenção é renderizar o conteúdo ao el. Portanto, o el serve como um local de pouso ou um contêiner para colocar seu conteúdo modelo. O backbone então vincula seus eventos aos dados do modelo dentro dele.

Quando você cria uma vista que você pode manipular o el de quatro maneiras usando el:, tagName:, className:, e id:. Se nenhum desses for declarado, o padrão será um div sem id ou classe. Também não está associado à página neste momento. Você pode alterar a tag para outra coisa usando tagName (por exemplo tagName: "li", fornecerá um el de <li></li>). Você pode definir o id e a classe de el da mesma forma. Ainda assim, el não faz parte da sua página. A propriedade el permite que você faça uma manipulação de granulação muito fina do objeto el. Na maioria das vezes eu uso umel: $("someElementInThePage")que, na verdade, liga toda a manipulação que você faz ao el em sua visualização à página atual. Caso contrário, se você quiser ver todo o trabalho árduo que você fez em sua visualização mostrado na página, você precisará inseri-lo / anexá-lo à página em algum outro lugar de sua visualização (provavelmente no processamento). Gosto de pensar em el como o contêiner que todas as suas visualizações manipulam.

Um pouco velho agora, mas eu também estava confuso, e para outras pessoas que chegam aqui, este violino pode ajudar - 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();
});

Você deseja que seu 'el' faça referência a um elemento que contém um elemento filho que possui qualquer evento que acione uma mudança em sua visualização. Pode ser tão largo quanto uma tag "body".