Question

我有an application（live）我尝试使用Ember将数据模型保存到CouchDB。我一直在研究Ember tutorial并且一直试图渲染数据。

页面加载时出现错误：“加载路径时出错：错误：路径不能为空”

我的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="style/main.css" type="text/css"/>
    <link rel="stylesheet" href="vendor/couchapp/jquery.mobile-1.4.2.css" type="text/css"/>
  </head>
  <body>
<script src="/_utils/script/sha1.js"></script>
    <script src="/_utils/script/json2.js"></script>
    <script src="vendor/couchapp/jquery-1.8.3.js"></script>
    <script src="/_utils/script/jquery.couch.js"></script>
    <script src="vendor/couchapp/jquery.couchLogin.js"></script>
    <script src="vendor/couchapp/jquery.couchProfile.js"></script>
    <script src="vendor/couchapp/md5.js"></script>
    <script src="vendor/couchapp/jquery.mustache.js"></script>
    <script src="vendor/couchapp/handlebars-1.0.0.js"></script>
    <script src="vendor/couchapp/ember.js"></script>
    <script src="vendor/couchapp/ember-states.js"></script>
    <script src="vendor/couchapp/ember-data-latest.js"></script>
    <script src="vendor/couchapp/couchdb_adapter.js"></script>
    <script src="vendor/couchapp/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="script/app.js" type="text/javascript"></script>
    <script src="script/application.js" type="text/javascript"></script>
    <script src="script/router.js" type="text/javascript"></script>
    <script src="script/models/habit.js" type="text/javascript"></script>

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

Answer 1

首先，您需要使用您的插座制作主应用程序模板

<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：无法访问您的实时示例，因为它需要用户名/密码。

Answer 2

couchapp示例使用的jQuery版本太旧了。我升级到最新版本，路由错误消失了。

＆＃34;路径不能为空＆＃34;在Ember中渲染模板时出错

2 个答案: