使用history.js以不同的方式响应不同的URL更改 [英] Responding differently to different url changes with history.js

问题描述

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

I'm using history.js, and want to call content via ajax when the url changes. I have that working, but the issue is that I need the page to respond differently depending on what URL is loaded when the state changes. For example, within a local scope, I need the pages related to URLs on the right hand nav to load into the content area next to them. If the URL changes to a scope outside of the section I'm in, I want the ajax call to load pages in a container that contains the whole section, including the right hand nav. How can I respond differently to URLs reliably using history.js?

示例：

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

I have some code that changes the URL when right hand nav items are clicked:

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更改时加载不同内容的代码：

...and some code that loads different content when the URL changes:

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'） ？：

But, what if I want the onstatechange event handler to react differently if the new url is outside of this sub-section? What if I want it to replace $('#primary-content').html() instead of $('#sub-content').html() if the new URL causes the AJAX request to pull content that doesn't belong in $('#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

When URL changes to: 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

When URL changes to: www.example.com/page.html

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

如何使用历史记录安全地确定URL何时转到其他部分的.js ？你如何对这种变化作出反应？

How do you safely determine when the URL goes to a different section using history.js? How do you react to that change?

推荐答案

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

You could use a router abstraction on top of History.js, which is a rather low-level API, to route URLs to different functions of yours. I have for instance written a History.js routing library called StateRouter.js. It's in very early stages of development, but if you find it missing the functionality to solve your problem, I'd love to hear from you. To see what the API has to offer, please look at the Jasmine tests in 'spec/StateRouterSpec.js'. You can apply StateRouter.js like so:

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以不同的方式响应不同的URL更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！