Question

我是requireJS和Onsen UI的新手。我正在将现有的HTML5应用程序迁移到cordova，一切正常。现有代码使用requireJS来加载模块，现在我正在尝试添加Onsen UI以提供更好的移动UI。我已经运行了Onsen UI示例模板，但是当我尝试在现有的requireJS配置中包含Onsen UI模块时，页面无法正确加载。

以前有人做过这个配置吗？或者任何人都可以指点我一些文件？我尝试从这个项目（https://github.com/jrowny/ionic-angular-cordova-require-seed）中遵循类似的配置for ionic + angular + require，没有任何运气。

这是我的index.html

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="stylesheet" type="text/css" href="css/app.css" />
  <!-- Onsenui CSS -->
  <link rel="stylesheet" type="text/css" href="css/lib/onsenui.css" />
  <link rel="stylesheet" type="text/css" href="css/lib/onsen-css-components.css" />
</head>
<body>
  <ons-split-view 
    secondary-page="menu.html" 
    main-page="page1.html" 
    main-page-width="70%" 
    collapse="portrait">
  </ons-split-view>
  <ons-template id="page1.html">
    <ons-page class="center">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="ons.splitView.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Page 1</div>
      </ons-toolbar>
      <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
        <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
        <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p> 
      </div>
      <ons-bottom-toolbar>
      </ons-bottom-toolbar>
    </ons-page>
  </ons-template>
  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
        <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
        <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p> 
      </div>
      <ons-bottom-toolbar>
      </ons-bottom-toolbar>
    </ons-page>
  </ons-template>
  <ons-template id="menu.html">
    <ons-page modifier="menu-page">
      <ons-toolbar modifier="transparent"></ons-toolbar>
      <ons-list class="menu-list">
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          <ons-icon icon="fa-plus"></ons-icon>
          New Post
        </ons-list-item>
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          <ons-icon icon="fa-bookmark"></ons-icon>
          Bookmark
        </ons-list-item>
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          <ons-icon icon="fa-twitter"></ons-icon>
          Official Twitter
        </ons-list-item>
      </ons-list>
      <br>
      <ons-list class="bottom-menu-list">
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          Settings
          <div class="notification menu-notification">3</div>
        </ons-list-item>
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          Help
        </ons-list-item>
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          Send feedback
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>
  <script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>

这是main.coffee脚本

require.config 
    paths: 
    cordova: '../cordova'
    backbone: 'lib/backbone-1.1.0'
    jquery: 'lib/jquery-1.9.0.min'
    lodash: 'lib/lodash-2.2.1.min'
    text: 'lib/text'
    marionette: 'lib/marionette.min'
    json2: 'lib/json2'
    vasat: 'lib/vasat'
    onsen: 'lib/onsenui'
    angular: 'lib/angular.min'
  shim:
    jquery:
      exports:'$'
    lodash:
      exports:'_'
    backbone:
      deps:['jquery','lodash']
      exports:'Backbone'
    marionette:
      deps:['backbone']
    vasat:
      deps:['marionette','text','json2']
      exports:'V'
    angular:
      exports:'angular'
    onsen:
      deps:['angular']

require ['onsen']

页面加载一秒钟然后我在javascript控制台中得到一个空白页面和下面的错误。

Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (http://localhost:8383/project/js/lib/onsenui.js:4112:15)
at unlock (http://localhost:8383/project/js/lib/onsenui.js:4100:14)
at h.$broadcast (http://localhost:8383/project/js/lib/angular.min.js:104:521)
at link.post (http://localhost:8383/project/js/lib/onsenui.js:9143:24)
at E (http://localhost:8383/project/js/lib/angular.min.js:49:345)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:399)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at http://localhost:8383/project/js/lib/angular.min.js:42:67
at http://localhost:8383/project/js/lib/angular.min.js:18:67 angular.min.js:84(anonymous function) angular.min.js:84(anonymous function) 
GET http://localhost:8383/project/page1.html net::ERR_EMPTY_RESPONSE angular.min.js:72
Error: Page is not found: page1.html

任何帮助都非常感激。

在Cordova应用程序中使用RequireJS配置Onsen UI

0 个答案: