Element doesn't exist after appending an element backbone

Question

I have backbone.js and require.js on my frontend, and my ace editor gives me an error that my element is not on the container element. I think that i should wait until dom ready or something like that.

My view code:

define(['jquery', 'underscore', 'backbone', 'text!templates/txtEditor.html'],function($, _, Backbone,  textEditorTemplate){

function get (aceInst) {
    return aceInst.getSession();
}

var txtEditorView = Backbone.View.extend({
    el: 'kitcube-console',
    appendElem: $('#kitcube-container'), 
    template: _.template('#txtEditorTemplate'),
    render: function(){
        editor.resize();
        $('#kitcube-console').style.fontSize = '14px';
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/yaml");
    },
    initialize: function() {
        var data = {};
        var compiledTemplate = _.template(textEditorTemplate, data);
        this.appendElem.append(compiledTemplate);
        //console.log(_.template(textEditorTemplate, {}));
        if (!document.getElementById(this.el)) {
            console.log('not inserted yet');
        }
        var editor = ace.edit(this.el);
        this.render();
    }
});

// 'jquery', 'underscore', 'backbone' will not be accessible in the global scope
return txtEditorView;
// What we return here will be used by other modules

});

My template:

<div id="kitcube-console">tab1:
    element0:
        name: circle
        xcoord: 1
        ycoord: 5
    element1:
        name: square
        xcoord: 5
        ycoord: 10    
tab2:
    element0:
        name: circle
        xcoord: 1
        ycoord: 5
    element1:
        name: square
        xcoord: 5
        ycoord: 10
</div>

Error:

 Uncaught TypeError: Cannot read property 'env' of undefined ace.js:1

Thanks in advance

Answer 1

Unless it's a typo, you're not selecting your el properly. You should have:

el: '#kitcube-console',

If the el isn't selected correctly, it will be undefined, which will cause issues when you call ace.edit(this.el).