jquery - 添加元素主干后元素不存在

Question

我的前端有backbone.js 和require.js，而我的ace 编辑器给我一个错误，指出我的元素不在容器元素上。我认为我应该等到 dom 准备好或类似的事情。

我的查看代码:

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

});

我的模板:

<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>

错误:

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

提前致谢

Answer 1

除非是拼写错误，否则您没有正确选择 el。你应该有:

el: '#kitcube-console',

如果el没有正确选择，它将是未定义的，这将在您调用ace.edit(this.el)时导致问题。