Backbone.js using el does not work, but uses $ ('selector'). What for?

Question

So, I admit that it might seem difficult for someone to follow my design and build templates. But I will try to better describe this problem, although I believe that it could be easier than making you understand my project :) But, damn it, I spent 3 days trying to figure it out.

Carrying out a technical layout

• I have a global view (lets call it GV, for global viewing), everything goes through this template.
• I have navigation, this can cause one of five separate views when clicked.
• Each of these views first uses the same view ( DVfor defaultView), which then extends this view and loads the details from its own JST(OV for OwnView)
• The problem is that when you click on the OV download, the object elementthat it should load in ( target) has not yet been displayed on the page. However, it is available in DOMand actually refreshes DVwith OV, but does not display the page.

Short review. To give you an idea of ​​how my views are tuned and that extends what

• GV - Download: login, main page, global navigation system
• DV - Loads: navigation for this section.
  • DV extends GV: SD.defaultView.extend
• OV - Loads: h2, icon for option and buttons
  • OV DV, : SD.defaultSexView.extend

OV , DV. GV DV . , login -> home -> navigation -> through, DV. . , , - , JST DV

:

• JST, .
• main.js require. .
• sdFunctions.js . 2 .
  • 1: GV,
  • 2: DV, ( )

, OV , . el: 'sexdetails'. DV. , DV DOM OV. .

. page GV sexdetails DV, OV. . , .

console.log, , element . - .

JS

: p

DV - - , .

SD.defaultSexView = function(){
    //set up homeview
    var sexView = SD.defaultView.extend({
        el: 'page',
        jstemplate: JST['app/www/js/templates/sex/sexTemplate.ejs'],
        events:{
            "click sexoptions > *" : 'changeSex'
        },
        changeSex: function(elem){

            var me = elem.currentTarget.localName;

            $('.selected').removeClass('selected');// #update selected from bottom navigation
            $(me).addClass('selected');

            SD.pageLoad(elem); // #Call function that will re-render the page
        },
        render: function () {
            var compiled = this.jstemplate();
            this.$el.html(compiled);
        }
    });
    SD.DSV = new sexView();
    SD.DSV.render();
    return sexView;
}();

- 5

//set up homeview
var wank = SD.defaultSexView.extend({
    el: 'sexdetails',
    jstemplate: JST['app/www/js/templates/sex.ejs'],
    data: {
        url: SD.HTTP+'stats/add',
        sextype: 'wank',
        header: 'SOME LOUD STRING!!!',
        image: '/img/path.jpg'
    },
    render: function () {
        c($('sexdetails'));
        c(this.$el);
        var compiled = this.jstemplate(this.data);
        this.$el.html(compiled);
    }
});
return wank;

: http://m.sexdiaries.co.uk/ - URL, SFW. .

, : $('sexdetails').html(compiled); , .

, , , , - , :)

Answer 1

. , , DOM. . $El.html() , DOM, , . ,

SD.pageLoad(elem)

, . elem , .

var compiled = this.jstemplate();
this.$el.html(compiled);

, , DOM, , , . $ , . $. , .

Answer 2

, "Wank" el sexdetails, . , , , DOM.

el " ", , - , , render .

, !