CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Hassan Khan
Hassan Khan

Reputation: 766

How to get Ember.js working?

I'm quite stuck and I don't know where I'm going wrong. I'm using the Inspiritas Bootstrap theme, and I wanted to use it in an Ember.js app.

I've been trying to read up, I can't seem to figure out what's going wrong - debugging didn't really help :(

My files are as follows:

app.js

app = Ember.Application.create();

app.IndexController = Ember.Controller.extend({
    name : "Hassan Khan"
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>app</title>
    <link href="inspiritas.css" rel="stylesheet">
</head>
<body>
    <script src='../components/jquery/jquery.js'></script>
    <script src="../js/jquery.tablesorter.js"></script>
    <script src="../components/moment/moment.js"></script>
    <script src="../components/highcharts.com/js/highcharts.src.js"></script>
    <script src="../components/handlebars/handlebars.js"></script>
    <script src="../components/bootstrap/js/bootstrap-dropdown.js"></script>
    <script src="../components/bootstrap/js/bootstrap-collapse.js"></script>
    <script src="../components/bootstrap/js/bootstrap-typeahead.js"></script>
    <script src="../components/ember/ember.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Now I'm not quite sure where the application bit should go, but here it is:

application.html

<div class="navbar navbar-static-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">app</a>
            <span class="tagline">Blah</span>
            <div class="nav-collapse collapse" id="main-menu">
                <div class="auth pull-right">
                    <img class="avatar" src="images/img.png">
                    <span class="name">{{ name }}</span><br/>
                    <span class="links">
                        <a href="#">Settings</a>
                        <a href="#">Logout</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row-fluid">
        <div class="span9" id="content-wrapper">
            <div id="content">
                {{ outlet }}
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 251

Answers (1)

Karl Guillotte
Karl Guillotte

Reputation: 194

application.html needs to be compiled by Ember.Handlebars. If you put its content between <script type="text/x-handlebars"> and </script> and place in the head or the body of your page, it will be automagically compiled and rendered for you.

It is also good practice to name your application variable App.

Your name should by moved to an App.ApplicationController if you want it to be rendered.

http://emberjs.com/guides would be a good starting point for creating an Ember Application. The new video from Tom Dale will definitely help you.

http://jsbin.com/aqokix/1

Upvotes: 4

Related Questions