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

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

示例：

<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>

我有一些代码可以在单击右侧导航项目时更改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不在此小节中时做出不同的反应，该怎么办？如果新URL导致AJAX请求提取不属于

$（“#子内容”）

的内容，我希望它替换

$（“#子内容”）.html（）

，该怎么办

基本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>

当URL更改为：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>

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

当URL更改为：www.example.com/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>

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

---

您如何使用

history.js

安全地确定URL何时转到其他部分？您如何应对该更改？

您可以使用正则表达式来区分不同的URL并确定“container”元素

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);
        }
    });
});

---

您可以使用正则表达式来区分不同的URL并确定“container”元素

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上使用路由器抽象，这是一个相当低级的API，将URL路由到您的不同功能。例如，我编写了一个名为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();

---

您可以在History.js上使用路由器抽象，这是一个相当低级的API，将URL路由到您的不同功能。例如，我编写了一个名为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();