Why does this Ember.js app fail in Firefox?

Question

I have a very simple Ember.js app which works correctly in IE and Chrome, but fails in Firefox (9.0.1 and 10.0). Any reason why? Here's the code:

<!doctype html>

<html>
<head>
    <title>Template Name</title>
</head>
<body>
    <script type="text/x-handlebars" data-template-name="my-template">
        {{App.user.name}}
    </script>

    <div id="container"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>

    <script type="text/javascript">
        window.App = Ember.Application.create();

        App.user = Ember.Object.create({
            name: 'John'
        });

        App.view = Ember.View.create({
            templateName: 'my-template'
        });

        App.view.appendTo('#container');
    </script>
</body>
</html>

What is the error that you are experiencing? – Veebs Feb 10 '12 at 05:53 — Veebs, Feb 10 '12 at 05:53

score 13 · Accepted Answer · answered Feb 10 '12 at 06:44

13

The error in firefox is

uncaught exception: Error: <Ember.View:ember143> - Unable to find template "my-template".

This would seem to indicate that the template script has not been evaluated at the point where the app executes. The solution is to wait for onload. Wrap your appendTo like this:

$(function() {
    App.view.appendTo('#container');
});

answered Feb 10 '12 at 06:44

Martin Algesten

13,052
4
54
77

7

You could also put that call into the Ember application's ready callback: `App = Ember.Application.create({ ready: function() { App.view.appendTo('#container'); }});`. – Tom Whatmore Feb 10 '12 at 10:47
Thanks. The ember.js doc page does not mention the ready function. Neither does the ember-starter-kit structure the application this way. Is there another place I should be looking for this kind of information? – Naresh Feb 10 '12 at 17:49
In general, what should go in the ready function vs. outside? In fact, should all Ember object creation/definition go inside the jQuery ready() function, including creation of the Empper application? – Naresh Feb 10 '12 at 17:58
3

These are both very good questions that I hope the documentation eventually will clarify. Right now I tend to do class definitions immediately and object instantiations/view-inserts in onReady(). – Martin Algesten Feb 11 '12 at 03:24
2

I got the same problem just a sec ago. This is something that ember.js should definitely document. – jsalonen Feb 21 '12 at 19:52

score 1 · Answer 2 · answered Dec 04 '12 at 22:45

I just experienced the exact same issue. I found out that it was caused due to Ember being dependent on Handlebars. It looks like after version 1.0 they removed the inclusion of the Handlebars source code. After adding in the Handlebars library, the error goes away.

score 1 · Answer 3 · answered Feb 27 '13 at 11:39

Ember.Application.create({ 
    ready: function() { 
        App.view.appendTo('#container');
    }
});

Tom Whatmore has the correct answer to this in the comments.

The error is displayed in the javascript console only if you use the unminified version of ember.js

The problem is that the template hasn't been evaluated by ember because you're code is executing as soon as the browser hits it, rather than after the ember application has been fully created.

Why does this Ember.js app fail in Firefox?

3 Answers3

Linked