5

皆さんこんにちは、

Rails アプリに history.js を実装するのは今回が 4 回目です。かなり問題なく動作しているアプローチが 1 つありますが、コードは非常に醜いです。今日もコードを見て考えました: どうすればこれをより良く、簡単に、より DRY にできますか?!

私がこれまでにやったこと（そして完全ではなく、かなりうまくいっています）：

  • remote: trueマイリンクに設定
  • jquery-ujs はjs.erb

私のHTMLは次のようになります：

<body>
  <div id="content">
    some content with buttons, etc.
  </div>
</body>

含まれるjs.erbもの：

History.pushState(
  {
    func: '$(\'#content\').html(data);',
    data: '<%= j(render template: "news/index", formats: [:html]) %>'
  },
  'test title',
  '<%= request.url %>'
);

そして、history.js が関数を受け取り、データを渡します。したがって、content-div を新しく生成されたコードに置き換えます。また、URL も更新します。このコードは、すべての (!)js.erbファイルに入れる必要があります。

少し見苦しくないようにするための私の最後の考えは次のとおりです。

  • remote: trueマイリンクに設定
  • リンクがクリックされると、 -divjs.erbを置き換えるものを取得しますcontent
  • を含むすべてのリンクは-handlerdata-remote="true"を取得しますajax:success
  • 新しい URL でhistory.jsajax:successにプッシュされます

しかし、内部にはまだ1つの問題があります。次に、JavaScript コードがあります。

$(document).on('ajax:success', 'a[data-remote="true"]', function() { ... });

問題は、リンク (イベントを発生させる必要がある) があった -tagajax:successを置き換えると、決して発生しないことです。div

誰かが私の問題を解決してくれるかもしれません...

それとももっと良い方法がありますか？

4

4 に答える 4

2

私はjquery-ujsとpushState、popStateのみを使用しています。

ここで私の答えを見てください：

https://stackoverflow.com/a/27532946/345996

于 2014-12-17T19:08:44.400 に答える
0

beforeSendイベントをすべての data-remote のグローバル リスナーとして使用して、ブラウザの履歴のハンドルを変更しています。ajaxリクエストの結果に関係なく、クリックするとすぐにリンクが変更されるようにするため、beforeSendを好みます...

$(document).bind('ajax:beforeSend', function(event,data){
    history.pushState(null, '', event.target.href)
});

DOM への変更が行われる前にイベントが発生するため、これで問題が解決します。

于 2013-09-10T22:40:00.380 に答える
-2

ターボリンクを試しましたか？Rails 4 ではデ​​フォルトになります。

于 2013-06-16T10:27:56.067 に答える