2012-04-10 16 views
5

みなさん、

Railsアプリでhistory.jsを実装しようとしました。私は非常に大丈夫だが、コードがとても醜い1つのアプローチを持っています。今日もまた私はコードを見て、考えました:どうすればこれをより良く、より簡単に、よりドライにすることができますか?フェッチjs.erb Railsでhistory.jsを正しく実行する方法は?

私のHTMLは次のようになり

  • 設定remote: true
  • 私のリンクにjqueryの-UJS:私はこれまで行われ(と完璧ではない、非常にいい作業)している

    <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私のリンク
    • へのリンクがクリックされますと、それはcontent -div
    • すべてのリンクに置き換えられているいくつかのjs.erbをフェッチdata-remote="true"ajax:success -handler
    • ajax:successで新しいURLがhistory.jsにプッシュされます

    しかし、そこにはまだ1つの問題があります。

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

    問題は次のとおりです:ajax:success私はリンクが(それがイベントを発生すべきである)にあったdiv - タグを置き換える場合は発火しません

    たぶん誰かが解決することができます。その後、私はJavaScriptコードを持っています私の問題...

    もっと良い方法がありますか?

+0

あなたがjquery.pjaxを見たことがありますか? –

+0

私はhistoy.jsのページを何度も見てきましたが、実際に試してみるという努力は一度もしませんでした。私はこの質問が明確な方法で答えるのを見たいと思っています。 – Ashitaka

+0

PJAXはHTML5のみです。 HTML4ブラウザは正常なリンクを取得するだけです... history.jsではHTML4ブラウザ用のAJAXも得られます –

答えて

-2

turbolinksを試しましたか?私は、ブラウザの歴史を扱う変更するには、すべてのデータのリモートのためにグローバルなリスナーとしてbeforeSendイベントを使用してい

History.Adapter.bind(window, 'statechange', function() { 
    var state = History.getState(); 
    ... 
}); 
0

になります。私はbeforeSendの方が好きです。なぜなら、ajaxリクエストの結果にかかわらず、リンクがクリックされるとすぐに変更したいからです。

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

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

0

: 何についてのRails 4のデフォルト

関連する問題