"el" must exist in DOM when use backbone marionette in browserify

Question

I use the backbone marionette in browserify.

I met a problem about showing view.

I have addRegions and want to show the ItemView.

But the console show error: Uncaught Error: An "el" #tmp_area must exist in DOM.

My HTML file have #tmp_area area.

When I use require.js it doesn't show this problem, but it happened when I change to use browserify.

I don't know what's wrong.

Below is my code.

app.js

var Backbone = require('backbone');
var $ = require('jquery');
Backbone.$ = $;

var Marionette = require('backbone.marionette');
var MyView = require('./views/my_view');

var app = new Marionette.Application();

app.addRegions({
    tmp_area: "#tmp_area"
});

app.addInitializer(function() {
    var myView = new MyView();
    app.tmp_area.show(myView);
});

app.on("initialize:after", function() {
    if (Backbone.history) {
        Backbone.history.start();
    }
});

app.start();

my_view.js

var $ = require('jquery');
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
var templates = require('../templates/tmp.hbs');
Backbone.$ = $;

module.exports = Marionette.ItemView.extend({
    template: templates,
})

Please help me!

I do appreciate it!

Answer 1

I'm pretty sure that this is related to the document ready state. You can just put a script at the bottom of your HTML or wrap an application initialization step into document.ready function.