Rails 3 アセット パイプラインを使用して、javascript を (coffeescript を使用して) モデルに関するファイルに構造化しました。たとえば、すべてのコメント書き込み関連の JavaScript は /app/assets/javascripts/comments.js.coffee に保存され、ユーザー オーバーレイ関連 (a:href のフェッチとそれらに対する ajax のトリガー) は /app/assets/javascripts/users に保存されます。 .js.コーヒー。
しかし、今では、HTML コンテンツがサイトに動的に取り込まれる AJAX 呼び出しをますます使用しています。問題は、さまざまなファイルで javascript を実行する必要があることですが、coffeescript は関数内にスコープされているため、それらにアクセスできません。
次のコードを含む general.js.coffee ファイルがあるとします。
$(document).ready ->
# Parse all images with action
$("img.clickableaction").click ->
# Fetch some content
$.ajax
url: "something.php"
dataType: "html"
complete: (xhr, status) ->
# We got the content, set it up to a container
$("#somecontainer").html(receiveddata)
# The tricky part:
# run code in comments.js.coffee for #somecontainer (or for the whole dom)
# run code in users.js.coffee for #somecontainer (or for the whole dom)
そして、comments.js.coffee には、たとえば次のものが含まれます。
$(document).ready ->
commentDiv = $('div#commentsContainer')
commentsFetch = $('a.commentsFetch')
# Set commentid for comments fetch
commentsFetch.bind 'ajax:beforeSend', (event, xhr, settings) ->
# do stuff
comments.js.coffee コードは、最初のページ ビュー (ユーザーがページを読み込んだときに受け取った HTML コードなど) に対して機能します。しかし、今度は、ajax 呼び出しから返されたコンテンツについて、comments.js.coffee コードを解析する必要があります。
範囲が限定されており、general.js からアクセスできないため、comments.js 内に関数を作成できません。これは、coffeescript が生成するものです。
(function() {
$(document).ready(function() {
var commentDiv, commentsFetch;
commentDiv = $('div#commentsContainer');
commentsFetch = $('a.commentsFetch');
}
})
window.comments && window.users など、個別のファイルごとにグローバル関数を作成できますが、ajax oncomplete 呼び出しが必要な多くの場所から window.comments を呼び出す必要があります。長期的には、重複して保守が困難なコードが生成されます。
どうやってこのようなものを作ることができますか:
// comments.js
window.ajaxExecuteBlocks.push(function() { // comments related stuff });
// user.js
window.ajaxExecuteBlocks.push(function() { // user related stuff });
// general.js ajax on complete:
window.runExecuteBlocks()
次に、runExecuteBlocks は、さまざまなコントローラー固有の JavaScript ファイルで初期化されたすべての関数を何らかの方法で実行します。
誰かが同様のシステムを実装しましたか?