CODEWITHSUNDEEP
ember.jshandlebars.js
Billybonks
Billybonks

Reputation: 1568

adding handlebar tags to template breaks ember application

im busy working through the getting started guide

currently at this point

http://emberjs.com/guides/getting-started/displaying-model-data/

i have a handlebars template 

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

but when i replace this static html with

     <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">
              {{#each}}
                <li>
                  <input type="checkbox" class="toggle">
                  <label>{{title}}</label><button class="destroy"></button>
                </li>
              {{/each}}
            </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>

the ember application doesn't load. ember inspector says there is no application. and no errors are displayed in the console. when i revert to the static code it fixes

JS Code

var Todos = Ember.Application.create();

Todos.ApplicationAdapter = DS.FixtureAdapter.extend();

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

Todos.TodosRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('todo');
    }
});

Todos.Todo = DS.Model.extend({
    title: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});

Todos.Todo.FIXTURES = [
 {
     id: 1,
     title: 'Learn Ember.js',
     isCompleted: true
 },
 {
     id: 2,
     title: '...',
     isCompleted: false
 },
 {
     id: 3,
     title: 'Profit!',
     isCompleted: false
 }
];

script tags

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>

Upvotes: 0

Views: 305

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

Update your dependencies to:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>

and everything should work.

Here I've pasted your code into a jsbin and it loads correctly: http://jsbin.com/EdUnOKi/2/edit

Hope it helps.

Upvotes: 2

Related Questions