Question

我有an application我试图使用Ember将数据模型保存到CouchDB。我一直在研究Ember tutorial，但我一直试图设置我的应用程序。

我的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>
    <div id="account"></div>

    <h1>Habit Tracker</h1>

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

    <div id="sidebar">
      <p>Track your habits.</p>
    </div>

    <script src="vendor/couchapp/jquery-1.8.3.js"></script>
    <script src="vendor/couchapp/handlebars-1.0.0.js"></script>
    <script src="vendor/couchapp/ember.js"></script>

    <script type="text/x-handlebars" data-template-name="habits">
      <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">
            <li><a href="#">
              <span>Pipe Of Tobacco</span>
              <span data-role="timer">1995-12-17T03:24:00</span>
            </a></li>
            <li><a href="#">
              <span>Pipe Of Tobacco</span>
              <span data-role="timer">1995-12-17T03:24:00</span>
            </a></li>
            <li><a href="#">
              <span>Pipe Of Tobacco</span>
              <span data-role="timer">1995-12-17T03:24:00</span>
            </a></li>
            <li><a href="#">
              <span>Pipe Of Tobacco</span>
              <span data-role="timer">1995-12-17T03:24:00</span>
            </a></li>
          </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>
    </script>

    <script src="script/application.js" type="text/javascript"></script>
    <script src="script/router.js" type="text/javascript"></script>

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

我的application.js只是：

window.Habits = Ember.Application.create()

而router.js是：

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

当我load the page时，我在控制台中收到以下内容：

DEBUG: ------------------------------- ember.js:3461
DEBUG: Ember      : 1.4.1+pre.af87bd20 ember.js:3461
DEBUG: Handlebars : 1.0.0              ember.js:3461
DEBUG: jQuery     : 1.8.3              ember.js:3461
DEBUG: ------------------------------- ember.js:3461
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.8.3.js:3254
DEBUG: ------------------------------- VM2062:3461
DEBUG: Ember      : 1.4.1+pre.af87bd20 VM2062:3461
DEBUG: Handlebars : 1.0.0              VM2062:3461
DEBUG: jQuery     : 1.8.3              VM2062:3461
DEBUG: ------------------------------- VM2062:3461
Ember Debugger Active VM2053:151
Uncaught Error: Assertion Failed: You cannot use the same root element (body) multiple times in an Ember.Application

如果删除对jQuery Mobile的引用，我只会收到一条加载消息（来自ember.js）并且没有错误。

Answer 1

通过跟踪jQuery Mobile的执行，我能够将错误缩小到以下几行：

var $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" )

if( !$pages.length ) {
  $pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 )
}

我通过将我的车把模板包裹在：

来修复错误

<div data-role="page">

使用jQuery mobile时，Ember加载两次

1 个答案: