ぶっちゃけ質問タイム。Mustache テンプレート システムを使用して、JSON データをフリップブック プラグインと統合しようとしていました。言うまでもなく、これはまったく機能していませんでした。
私は jQuery 初心者なので、JSON データをプラグイン (Mustache タグの有無にかかわらず) にバインドしてアニメーション化する簡単な方法はありますか??
あなたの質問からあなたが何を望んでいるのかを推測するのは少し難しいですが、私はあなたがすでにすべてのピースをまとめていると感じています. まず、コメントでリンクしている例: https://github.com/blasten/turn.js/wiki/Making-pages-dynamically-with-Ajax
これは、まだロードされていないページを Ajax 経由で取得します。サンプル コードは、Ajax 呼び出しがサーバーから HTML を取得することを前提としています。
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
element.html(data);
});
ここで、done
関数は、サーバーから返されたを、現在のページを含むと予想される にdata
直接注入することによって処理します。element
次に、サーバー側のメソッドがあると仮定しますが、そのメソッドは代わりに JSON を返します。ここでは、次の構造を返すと仮定します。
{ "title" : "the title of page N",
"text" : "here is some text for the page N." }
done
次に、結果をページに挿入する前に、この JSON を関数内の html にレンダリングします。README.mdの短いチュートリアルを見ると、次のようになります。
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
var pageHtml = Mustache.render("<h2>{{title}}</h2><p>{{text}}</p>", data);
element.html(pageHtml);
});
サーバーが適切な値を返すとdata
、
<h2>the title of page N</h2><p>here is some text for the page N.</p>
ページに表示されます。