2

目前我正在不同页面中进行路由，它会很好

angular.module('myApp',[]).config(function ($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);
    $routeProvider.
    when("/",
    {
        templateUrl: "index.html"
    }).
    when("/foodscreen",
    {
        templateUrl: "addfood.html"
    })
});

通过这种方式一切都很好，但现在我正在使用单页结构AngularJs和JQuery-Mobile单页结构制作应用程序，所以我的问题是我如何在单页结构中配置路由

单页结构示例

<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>

4

1 回答 1

1

这是我在backbonejs中的做法。样品在咖啡脚本中。首先你需要告诉 jqm 不要监听散列变化：

$(document).on "mobileinit", ->
  # Prevents all anchor click handling including the addition of active button state and alternate link bluring.
  $.mobile.linkBindingEnabled = false
  # Disabling this will prevent jQuery Mobile from handling hash changes
  $.mobile.hashListeningEnabled = false
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;

主干中的示例路由配置：

routes:
  "": "home"
  "home": "home"

home: ->
  $.mobile.loading "show"
  currentView = new HomeView(
    el: "#home"
    model: new HomeModel()
  )
  # render the page... view is using underscorejs for applying templates
  currentView.render()
  # need to apply jqm styles...
  $(currentView.el).trigger('create');
  # now use jqm to change the page
  $.mobile.changePage "#" + currentView.el.id,
    reverse: false
    changeHash: false

路由部分特定于backbonejs。这是一个类似http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/的链接。当我在 pagehide 事件中删除页面时遇到了问题。我认为更优雅的方法是简单地使用 trigger('create') 方法将 jqm 标记返回到页面上。希望这可以帮助！

于 2013-12-23T20:16:37.940 回答