Ошибка «Путь не может быть пустым» при отображении шаблона в Ember

Question

Ошибка «Путь не может быть пустым» при отображении шаблона в Ember

0

У меня есть приложение (live), где я пытаюсь использовать Ember для сохранения модели данных в CouchDB. Я работаю над учебником Ember и стараюсь отображать данные.

Когда страница загружается, я получаю сообщение об ошибке: "Ошибка при загрузке маршрута: Ошибка: Путь не может быть пустым"

Мой application.js:

window.Habits = Ember.Application.create()
window.Habits.ApplicationAdapter = DS.FixtureAdapter.extend()

router.js:

Habits.Router.map( function() {
    this.resource( 'habits', { path: '/' } )
} )

Habits.HabitsRoute = Ember.Route.extend( {
    model: function() {
        return this.store.find( 'habit' )
    }
} )

Модель, models/habit.js:

Habits.Habit = DS.Model.extend( {
    name: DS.attr( 'string' ),
    isCompleted: DS.attr( 'boolean' )
} )

Habits.Habit.FIXTURES = [
    {
        id: 1,
        name: 'Pipe of Tobacco',
        isCompleted: true
    },
    {
        id: 2,
        name: 'Pipe of Marijuana',
        isCompleted: false
    },
    {
        id: 3,
        name: '80mg Latuda',
        isCompleted: false
    }
]

Наконец, мой HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Habit Tracker</title>
    <link rel="stylesheet" href="/main.css" type="text/css"/>
    <link rel="stylesheet" href="/jquery.mobile-1.4.2.css" type="text/css"/>
  </head>
  <body>
<script src="/sha1.js"></script>
    <script src="/json2.js"></script>
    <script src="/jquery-1.8.3.js"></script>
    <script src="/jquery.couch.js"></script>
    <script src="/jquery.couchLogin.js"></script>
    <script src="/jquery.couchProfile.js"></script>
    <script src="/md5.js"></script>
    <script src="/jquery.mustache.js"></script>
    <script src="/handlebars-1.0.0.js"></script>
    <script src="/ember.js"></script>
    <script src="/ember-states.js"></script>
    <script src="/ember-data-latest.js"></script>
    <script src="/couchdb_adapter.js"></script>
    <script src="/sprintf.js"></script>

    <script type="text/x-handlebars" data-template-name="habits">
      <div id="account"></div>

      <h1>Habit Tracker</h1>

      <div id="profile"></div>

      <div data-role="page">
        <div data-role="tabs" id="tabs">
          <div data-role="navbar">
            <ul>
              <li><a href="#habits" data-ajax="false">Habits</a></li>
              <li><a href="#mood" data-ajax="false">Mood</a></li>
              <li><a href="#events" data-ajax="false">Events</a></li>
              <li><a href="#stats" data-ajax="false">Stats</a></li>
            </ul>
          </div>
          <div id="habits" class="ui-body-d ui-content">
            <ul data-role="listview" data-inset="true">                                                                                                                                                  
              {{#each}}                                                                                                                                                                                  
                <li><a href="#">
                  <span>{{name}}</span>
                  <span data-role="timer">2013-12-17T03:24:00</span>
                </a></li>                                                                                                                                                                                
              {{/each}}                                                                                                                                                                                  
            </ul>
          </div>
          <div id="mood">
            <ul data-role="listview" data-inset="true">
              <li><a href="#">Acura</a></li>
            </ul>
          </div>
          <div id="events">
          </div>
          <div id="stats">
          </div>
        </div>
      </div>
    </script>
    <script src="script/timer.jquery" type="text/javascript"></script>
    <script src="/app.js" type="text/javascript"></script>
    <script src="/application.js" type="text/javascript"></script>
    <script src="/router.js" type="text/javascript"></script>
    <script src="/habit.js" type="text/javascript"></script>

    <script src="/jquery.mobile-1.4.2.js"></script>
  </body>
</html>

Will 19 март 2014, в 21:30

Источник

Теги:

jquery

ember.js

2 ответа

0

Прежде всего, вам нужно сделать свой основной шаблон приложения с вашей розеткой, как это

<script type="text/x-handlebars">
     {{outlet}}
</script>

Затем в шаблоне ваших привычек вам нужно изменить его следующим образом:

 {{#each in model}}
    <li>
       <a href="#">
            <span>{{name}}</span>
            <span data-role="timer">2013-12-17T03:24:00</span>
       </a>
    </li>
 {{/each}}

Поскольку вы повторяете элементы в своей модели, вам нужно указать, какое свойство вы используете.

PS: Невозможно получить доступ к вашему живому примеру, потому что для этого требуется имя пользователя/пароль.

NicholasJohn16 19 март 2014, в 22:48

Ещё вопросы

Will · Accepted Answer · 2014-03-20T15-46-00.000Z

Версия jQuery, используемая примером couchapp, была слишком старой. Я обновился до последней версии, и ошибка маршрутизации исчезла.