Dittoを使ってAjaxで「もっと読む」「さらに見る」などのリンクを実装してみます。

例でリソースのツリーは以下のようになっているものとして、商品情報以下のリソースを取得します。

商品情報一覧ページ(2)のリソースに最初から表示しておく一覧用のDittoを書きます。

[[Ditto?
  &parents=`2`
  &display=`4`
  &paginate=`1`
  &tpl=`@CODE: 
[+title+]
登録日: [+date+]
`
]]

ページネーション機能&paginateを有効にしてプレースホルダを使えるようにしておきます。

ページリンクの代わりに以下のような「もっと読む」用のリンクを書きます。

  もっと読むloading...

あとで説明するJavaScriptではAjaxロード中は.moreクラスに.loadingクラスを追加するようにするため、これを利用してロード中じゃなければ.more .linkを表示、ロード中なら.more .loadingを表示するようにしました。

.more { border: 1px solid #ccc; padding: 10px; background: #f5f5f5; text-align: center; }
.more .link, .more.loading .indicator { display:block; }
.more .indicator, .more.loading .link { display:none; }

次にAjax取得先のリソースを作成します。Dittoはデフォルトで非公開以下のリソースを表示しないので非公開フォルダを作りその中にリソース「ajax.html」を作成します。このリソースはテンプレートを(blank)に設定してDittoのみを表示するようにします。
「商品情報/app/ajax.html」の中身は以下のとおりで

を省いた以外はHTMLに書いたものと同じです。全く同じなのでテンプレートが長ければチャンク化しても良いとおもいます。

[[Ditto?
  &parents=`2`
  &display=`4`
  &paginate=`1`
  &tpl=`@CODE: 
[+title+]
登録日: [+date+]
`
]]

このリソース自体にアクセスしてページネーション表示されるか確認してみてください。

次にAjax用のJavaScriptを書きます。jQueryを使用するのでjQuery本体を読み込みます。

以下例で作成したシンプルなAjaxロード用のjQueryプラグインです。

8f5c000d8e4b7047a69f

セレクタを$(document).readyで設定します。

8f5c000d8e4b7047a69f

読み込むタイミングをクリックから.moreのスクロール位置（表示位置）に変えてにょごにょしたらTwitterみたいにスクロールしたら勝手に読みこむ感じに出来そうです（？）

そして今更になりますが実はこのタイプの読み込み方法は個人的にはあんまり好きではなくて、数ページ分読み込んでから記事を読んでブラウザで戻るとまた最初からロードしないといけなかったり、そのページ分一覧のURLが取得できない、というのがとても不便に感じます。実際に使う場合はもう少しユーザビリティを考慮した形にするといいかもしれません。例えばはてなブックマークのように通常のページネーションと両実装させるやり方もおすすめです。また時間がある時にそのへんも考慮したサンプルを書きたいなーと思ってます。