Question

我正在使用history.js，并希望在网址更改时通过ajax调用内容。我有这个工作，但问题是我需要页面响应不同，具体取决于状态更改时加载的URL。例如，在本地范围内，我需要右侧导航栏中与URL相关的页面加载到它们旁边的内容区域。如果URL更改为我所在部分之外的范围，我希望ajax调用在包含整个部分的容器中加载页面，包括右侧导航。如何使用history.js可靠地响应URL？

示例：

我有一些代码可以在点击右手导航项时更改网址：

var History = window.History;

$('#right-hand-nav a').on('click', function(event) {
  var place = $(this).attr('href');

  History.pushState("", "page title", place);  
  event.preventDefault();
});

...以及在URL更改时加载不同内容的一些代码：

History.Adapter.bind(window,'statechange',function() {
  var State      = History.getState()
      subContent = $('#sub-content');

  $.ajax({
    url: State.url,
    beforeSend : function() {
     // Would start pre-loader code
    },
    success    : function(result) {
     // Would end pre-loader code
     subContent.html(result);
    } 

  });
});

但是，如果我希望onstatechange事件处理程序在新的url超出此子部分时做出不同的反应，该怎么办？如果新网址导致AJAX请求提取不属于$('#primary-content').html()的内容，我希望它替换$('#sub-content').html()而不是$('#sub-content')该怎么办？：

基本HTML：

<section id="primary-content">
  <section id="sub-content">
  </section>
  <nav id="sub-navigation">
  <ul>
    <li>
      <a href="#">Nav item</a>
    </li>
    <li>
      <a href="#">Nav item</a>
    </li>
    <li>
      <a href="#">Nav item</a>
    </li>
  </ul>
  </nav>
</section>

当网址更改为： www.example.com/sub-section/page.html

<section id="primary-content">
  <section id="sub-content">
    <!-- ajax should load content here -->
  </section>
  <nav id="sub-navigation">
  <ul>
    <li>
      <a href="#">Nav item</a>
    </li>
    <li>
      <a href="#">Nav item</a>
    </li>
    <li>
      <a href="#">Nav item</a>
    </li>
  </ul>
  </nav>
</section>

当网址更改为： www.example.com/page.html

时

<section id="primary-content">
    <!-- ajax should load content here -->
</section>

如何使用history.js安全地确定网址何时转到其他部分？你如何应对这种变化？

Answer 1

您可以在History.js之上使用路由器抽象，这是一个相当低级的API，用于将URL路由到您的不同功能。例如，我编写了一个名为StateRouter.js的History.js路由库。它处于开发的早期阶段，但如果您发现它缺少解决问题的功能，我很乐意听取您的意见。要查看API提供的内容，请查看'spec / StateRouterSpec.js'中的Jasmine测试。您可以像这样应用StateRouter.js：

var router = new staterouter.Router();
router
  .route('/', loadHomePage)
  .route('/page.html', loadSection)
  .route('/sub-section/page.html', loadSubsection);
// Perform routing of the current state
router.perform();

Answer 2

您可以使用正则表达式来区分不同的网址，并确定容器＆＃39;元件。

History.Adapter.bind(window, 'statechange', function()
{
    var State = History.getState(),
        containerElement;

    // Use regex to distinguish urls
    if (/\/sub-url$/i.test(State.url))
    {
        containerElement = $("#sub-content");
    }
    else
    {
        containerElement = $("#primary-content");
    }

    $.ajax({
        url: State.url,
        beforeSend: function()
        {
            // Would start pre-loader code
        },
        success: function(result)
        {
            // Would end pre-loader code
            containerElement.html(result);
        }
    });
});

使用history.js以不同的方式响应不同的URL更改

2 个答案: