5

KnockoutJSはこれまでのところ非常に使いやすくなっていますが、フレームワークは初めてです。タブ付きのインターフェイス、たとえば4つのリンクと共通の表示領域を作成しようとしています。リンクをクリックすると、Knockoutのテンプレートシステムが利用され、テンプレートが切り替わります。これはうまく機能していますが、テンプレートの切り替えの間に何らかのアニメーションを追加したいと思います。

どうすればこれを達成できますか？beforeRemove / afterAddについて少し読みましたが、これはobservableArraysにのみ当てはまるようです。KnockoutJSがアニメーション/カスタムバインディングをサポートしていることは知っています（ページ上の他の要素に対してより簡単に使用しています）。

私のアプローチ全体が正しくない場合、簡単にトランジションを取得するためにタブ付きインターフェイスを実行するためのより良い方法はありますか？

これが今の私のコードです。

HTML：

<div class="Page">
    <span data-bind="template: {name: current_page()}"></span>
</div>
<script type="text/html" id="Home">
    <!-- Home content -->
</script>
<script type="text/html" id="Tab1">
    <!-- Tab1 content -->
</script>

Javascript（KnockoutのViewModel）：

this.current_page  = ko.observable("Home")
//later on...
this.current_page("Tab1");
4

1 に答える 1

9

テンプレートバインディングafterRenderのプロパティを使用できます：

<span data-bind="template: {name: current_page(), afterRender: animatePageChange }"></span>

..次に、ビューモデルに、好きなアニメーションを追加できます。

animatePageChange: function() { $('#content').hide(); $('#content').fadeIn(3000); }

http://jsfiddle.net/unklefolk/v3JMS/1/に簡単なデモをまとめました。

于 2012-05-29T09:25:18.403 に答える