Ember text/x-handlebars: letter not allowed error

1
votes

Going through the Ember.js GettingStarted guide section. ADDING THE FIRST ROUTE AND TEMPLATE

Index.html.erb
<html>
  <head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="style.css">
    <script src="js/libs/jquery-1.10.2.min.js"></script>
    <script src="js/libs/handlebars-1.0.0.js"></script>
    <script src="js/libs/ember.js"></script>
    <script src="js/libs/ember-data.js"></script>
    <script src="js/application.js"></script>
    <script src="js/router.js"></script>
  </head>
  <body>
    <script type="text/x-handlebars" data-template-name="application">
      {{outlet}}
    </script>

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

  </body>
</html>

js/application.js

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

js/router.js

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

In my libs file. I have the ember-data.js, ember.js, handlebars-1.0.0.js, and jquery-1.10.2.min.js (This works because when I take out the script handlebars it works)

It works when I don't wrap the inner body with the todos handlebars. What is happening?

Error message: '<' + '/' + letter not allowed here

1
javascriptjqueryember.js
moved your code here emberjs.jsbin.com/itAfUlO/1/edit and it looks fine. Also added a t in Ember.Applicaion.create(); – melc
Can you clarify It works when I don't wrap the inner body with the todos handlebars.? It's too early and my brain isn't fully functional yet – Kingpin2k
Hey @melc make your comment an answer so I can mark as solved :). And yes, brain wasn't functioning properly. – jmoon90
@jmoon90 ok i'm glad you resolved the issue, but if you also feel that there isn't much information for future visitors, please don't hesitate to remove the question. – melc
It was a PEBKAC but it would've been nice if there was a SOF with the same "letter not allowed error" so I'll keep it up. – jmoon90

1 Answers

0
votes

Moved your code here emberjs.jsbin.com/itAfUlO/1/edit and it looks fine. Also added a t in Ember.Applicaion.create();