0

マイクロポスト/コメントシステムがあり、新しいマイクロポストまたはコメントが送信されるたびに、ページが更新されて表示されます。

フォームにajaxを設定したので、マイクロポストを作成するか、ページを更新せずに追加したいと思います。

これまでのところ：

if @micropost.save
  format.js   { render :post_on_wall }
else
  format.js   { render :form_errors }
end

このスニペットで何が起こっているのかを理解するために、RubyonRailsの専門家である必要はありません。フォームがすべての検証に合格し、ユーザーがpostをクリックする前に実際に有効なものを入力した場合、「if @ micropost.save」がtrueになり、「post_on_wall」という名前のファイル内でjsが実行されます。「@micropost.save」の場合、「form_errors」内のコードが実行されます。

form_errors内に、ユーザーが何も入力せずに投稿をクリックしたときにマイクロポストが投稿されないことを確認するためのアラートを追加しました。正常に動作します。

「post_on_wall」ファイルには次のようなものがあります。

$('.microposts').prepend('<%= j render("users/partials/microposts") %>');

これに伴う問題は、基本的に、「users / components / microposts 」とレンダリングされるファイルでループされているすべてのマイクロポストを取得し、「。microposts」div内のすべての上に配置することです。「.microposts」の上部にあるマイクロポストを投稿する実際のフォームでさえ、ページに追加されたばかりのコンテンツの下に押し下げられます。

これが私のhtml構造です。

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
    </div>
    <div id='rightColumn'>
  </div>
</div>

各マイクロポストとそれに関連するコメントは、「。postHolder」というクラス内に保存されます。

私はこれについて間違った方向に進んでいると感じています。this： "users / components / microposts"が指すファイルには、基本的に一度に10個のマイクロポストを表示するのに役立つコードが含まれています。これは、私がやろうとしていることとはまったく異なる何かに使用されます（ページ付け+無限スクロール）。

とにかく、私がこれに取り組むべき方法は、投稿されたばかりの新しい投稿を何らかの方法で検出することだと感じています。新しい「.postHolder」クラスとして検出され、検出された後、「postHolder」のリストの一番上に追加され、その上のマイクロポストフォームが置き換えられないようにする必要があります。

すべてのマイクロポストを保持するために別のdivを作成し、このdivをマイクロポストフォームの下に配置することを考えています。そうすれば、フォームが押し下げられることを心配する必要はありません。実際に私が前に付けるものになるすべてのマイクロポストが含まれています。

とにかく、私はこの機能を実装するのに役立つ例やいくつかの良いアドバイスが本当に欲しいです。

お時間をいただきありがとうございます。

4

2 に答える 2

1

あなたが

  1. 投稿を時系列の降順で並べ替えたい
  2. 更新のために返す必要のあるデータの量を最小限に抑えたい

投稿が正常に送信されたら、サーバーへのAJAX呼び出しを開始して、最後に表示された投稿よりも新しいすべての投稿を取得することをお勧めします。ポストホルダーHTMLを次のように要約できると仮定します

<div id='microposts'>
    <form id='new_post'></form>
    <div class='postholder' id='some-id-number'></div>
    <div class='postholder' id='some-older-id-number'></div>
    ...
</div>

サービスコールから返されたhtmlとして新しい投稿を取得します

function getNewPosts(){
    $.ajax({
        url: 'Your-New-Posts-Url',
        data: {lastId: $('.postholder:first').attr('id')},
        success: function(newPosts){
            if(newPosts && newPosts.length > 0){
                $('.postholder:first').before(newPosts);
            }
        }
    });
}

setTimeoutをハートビートとして使用して、getNewpostsを頻繁に呼び出すこともできます。

于 2012-04-09T17:10:27.937 に答える
0

タイトルの質問「JQueryは新しいクラスが表示されたときにそれを検出できますか？」に答えるには：いいえ。

新しい要素がページに追加されたときに発生するイベントがありますが（DOMNodeInsertedIntoDocument）、それは絶対に非効率的です（そして非推奨です）。

.trigger()新しい要素を追加するコードでjQueryのメソッドを使用してカスタムイベントを発生させることをお勧めします。これにより、新しい要素があることを独立したモジュールに通知できます。

ただし、新しい要素のイベントハンドラー登録を探している場合は、jQueryの.live()メソッドを確認する必要があります。

于 2012-04-09T16:50:34.943 に答える