CODEWITHSUNDEEP
ember.js
giluna
giluna

Reputation: 43

Using handlebars end-up displaying nothing

First, I'm a new user so if this is not the place to ask this question or the question is leaking with details please inform me and I'll do the required adjustments.

I'm new to Ember.JS and I've recently started learning by reading this getting started guide.

In the early stages of this guide I'm already dealing with the next problem:

All stages worked well until the stage where I need to update my index.html to wrap the inner contents of <body> in this Handlebars script tag:

<script type="text/x-handlebars" data-template-name="todos">.....</script>

as asked in the 5th step of this guide.

After I do so my window ends-up displaying nothing (except for the background image)

Here is how my files looks like (hierarchic):

https://dl.dropboxusercontent.com/u/24149874/image.png

And those are the content of the relevant files from the previous steps in the guide:

index.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script type="text/x-handlebars" data-template-name="todos">
        <section id="todoapp">
          <header id="header">
            <h1>todos</h1>
            <input type="text" id="new-todo" placeholder="What needs to be done?" />
          </header>

            <section id="main">
              <ul id="todo-list">
                <li class="completed">
                  <input type="checkbox" class="toggle">
                  <label>Learn Ember.js</label><button class="destroy"></button>
                </li>
                <li>
                  <input type="checkbox" class="toggle">
                  <label>...</label><button class="destroy"></button>
                </li>
                <li>
                  <input type="checkbox" class="toggle">
                  <label>Profit!</label><button class="destroy"></button>
                </li>
              </ul>

              <input type="checkbox" id="toggle-all">
            </section>

            <footer id="footer">
              <span id="todo-count">
                <strong>2</strong> todos left
              </span>
              <ul id="filters">
                <li>
                  <a href="all" class="selected">All</a>
                </li>
                <li>
                  <a href="active">Active</a>
                </li>
                <li>
                  <a href="completed">Completed</a>
                </li>
              </ul>

              <button id="clear-completed">
                Clear completed (1)
              </button>
            </footer>
        </section>

        <footer id="info">
          <p>Double-click to edit a todo</p>
        </footer>
    </script>

    <script src="libs/jquery-1.10.js"></script>
    <script src="libs/handlebars.js"></script>
    <script src="libs/ember.js"></script>
    <script src="libs/ember-data-0.13.js"></script>

    <script src="application.js"></script>
    <script src="router.js"></script>   

  </body>
</html>

application.js

window.Todos = Ember.Application.create();

router.js

Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});

Of course, I tried to find an answer in other relevant posts but nothing I found was helpful.

Appreciate your help!

Upvotes: 4

Views: 1078

Answers (3)

Aniket Sinha
Aniket Sinha

Reputation: 6031

In addition to the jQuery file, even handlebar file's name is also incorrectly written in the index.html file.

Modify the index.html file with following code:

<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>

Further in the next step, note the js file is named js/app.js or js/application.js since the code at github has file name as app.js whereas the website shows file name as application.js.

Upvotes: 1

Robert Strohmeyer
Robert Strohmeyer

Reputation: 512

FWIW, I had the same problem, and it turned out the jQuery file in my js folder was a different version than the one called for in the tutorial's html. It was a simple error, but one that took me a little too long to notice.

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

I guess the only piece missing here is the application template itself.

Try to define one like this:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="todos">
  ...
</script>

The {{outlet}} here is important since you need to tell ember where to inject your todos template.

See here for a working example, the css file is not included so it's normal that everything is screwed up, but the basic setup is working.

Hope it helps.

Upvotes: 1

Related Questions