8

開発中のアプリで pjax を試していますが、ちょっと壁にぶち当たりました。

多分私はこれについて間違った方法で行っているので、説明させてください。

アプリの上部にメイン メニューがあり、さまざまなセクションがあります。このメニューの各リンクは pjax 対応です。つまり、アプリケーションの本体のみが変更されます。

通常、pjax のないリンクをクリックすると、document.ready メソッドがトリガーされます。これを使用して、次の例のようにイベントをボタンにバインドします。

ここに私のusers.js.coffeeファイルがあります

loaded = false;
$ ->
  $("#btn_new_user").bind "click", (event) ->
    if not loaded
      @path = $('#btn_new_user').attr("path")
      $("#new-users-container").load(@path)
      loaded = true
    $("#new-users-container").slideToggle()

この例でわかるように、「users」ページの読み込みが完了すると、フォームを div に読み込み、アニメーション化して表示するイベントにボタンがバインドされます。

ただし、管理者の別のセクションで開始し、[ユーザー] リンクをクリックしてこのボタンを表示すると、イベントはバインドされません。[ユーザー] セクションでページをリロードすると、document.ready がトリガーされ、ボタンが正常に機能します。

イベントをボタンにバインドするためのより良い手法はありますか、または pjax で document.ready をトリガーする方法はありますか?

ありがとう。

4

3 に答える 3

2

これが私が現在これを行っている方法です。

  1. ここに示されているように、イベントに対してデリゲートバインディングを使用します。

  2. 他の初期化については、この方法で実装します（生のJavascriptで）

    window.pjax_load = function() {
  $('#foo').do_whatever();
  ...
}

$(document).ready(function() {
  // setup events etc

  window.pjax_load();
  $('a').pjax( "#container" );
  $('#container').on('pjax:end', function() { window.pjax_load(); });
});
于 2012-03-27T22:27:25.627 に答える
0

さて、昨日いくつかのことを学びました。

まず、coffeescript をそのように宣言すると、コードはそのファイルでのみ使用可能になり、他の場所ではアクセスできなくなります。

これを回避する一般的な方法は、たとえば

Users =
   aMethod: -> 
      // some code


window.Users = Users

それからあなたができる他の場所で

window.aMethod

とにかく、それは問題の一部にすぎませんでした。実際の解決策は、デリゲートhttp://api.jquery.com/delegate/メソッドを使用することでした。これにより、要素が存在しなくてもバインドできます。

于 2011-11-15T15:13:18.663 に答える