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 がこのサブセクションの外にある場合に、イベント ハンドラーの反応を変えたい場合はどうすればよいでしょうか? 新しい 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>

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

かなり低レベルの API である History.js の上でルーターの抽象化を使用して、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 に答える