無限スクロールで追加された要素を部分更新

Question

現在フェイスブックのように投稿一覧が無限スクロールで表示されるサイトを作っています。

テキストを投稿し、さらに各投稿に対してコメントをつける機能を作りました。
※コメントの投稿自体はうまくいっています。

コメント投稿後にコメントを非同期で各投稿毎に用意した要素に反映させたいのですが、
無限スクロールで追加された投稿に関してはjqueryのload()で部分更新させることができません。

最初から表示されている投稿へのコメントに関しては上記の方法で部分更新させることができています。

無限スクロールのように非同期で追加された要素にload()などで部分更新させたい場合はどのような方法があるのでしょうか？

やりたいことはフェイスブックの各投稿にコメントできる機能と同じです。

よろしくお願いします。

Answer 1

https://mobile.twitter.com/TwitterTips/timelines/581843572464443392?utm_source=email&utm_medium=video-wk20&utm_term=&utm_content=&utm_campaign=reactivation&ref_src=email

無限スクロールってこういうの？
ページのスクロール一杯近辺で次の投稿が出てくる。これ、次々出てきていつまでも下が見えませんよね。

コメント欄をページ下部に追加するごとにidを通し番号で割り振るだけじゃダメなんですか。
なので、load でやると、サーバ処理はhtmlを返却しなければならず融通が利きません。
json 配列で取得して、ユニークid、つまり先頭の投稿からの通し番号を設定したhtml のテンプレートに設定し、任意のコメントに対するレスコメントは、親コメントのid を付けてサーバに送信してあげる。

[
   {
       parent:"id99",
       comment: "komento",
       user: "hoge",
       icon: "hoge.png",
       image: "1234667890.mov",
       date: "2016/01/06 12:34:26.678"
    }
]

この配列を json.parse した結果のobject を

<div id="{{id}}_{{uniqueid}}">


</div>

コンテンツの構成は省略しますが、このhtmlテンプレートと jsonオブジェクトのプロパティ、id と {{id}} プレースホルダーを結びつけ、置換完了したhtmlをid のdiv内にアペンドする。

こんな感じでいけるはずですけど。
この文面から理解できます？

jquery のテンプレートエンジンは、jsRenderがお勧めです。

http://qiita.com/HelloPeople/items/7db7c8f5e5ace3b40874

Comments

[masacode]

外部ファイルにコメントを表示する為の記述を用意して、
phpのセッション変数など使用してなんとかやりたいことができました。

私の知識不足で教えていただいた通りには出来ませんでしたが、
かなりヒントになる部分がありました。

ありがとうございました。