1

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

例子：

我有一些代码可以在单击右侧导航项时更改 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 不在此子部分之外时做出不同的反应怎么办？如果我希望它替换$('#primary-content').html()而不是$('#sub-content').html()新 URL 导致 AJAX 请求提取不属于的内容$('#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>

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

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

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

您如何使用 安全地确定 URL 何时转到不同的部分history.js？你对这种变化有何反应？

4

2 回答 2

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();
于 2013-01-02T18:57:40.913 回答
0

您可以使用正则表达式来区分不同的 url 并确定“容器”元素。

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);
        }
    });
});
于 2012-10-10T13:47:54.580 回答