2

ノックアウトjs動的テンプレートを正常に使用して、ユーザーがアイテムの詳細を表示するためにクリックしたかどうかに応じて、さまざまなビューを表示しています。

以下に含まれる基本的なコード：

<div data-bind="template : {name: GetView , foreach: DisplayableItems}"></div>
<script type="text/html" id="SimpleView">
<div class="entry list">
    <h1>Simple View </h1>
    <a  data-bind="click:ToggleDisplayMode">Expand</a>
</div>
</script>
<script type="text/html" id="DetailView">
<div class="entry list">
    <h1>Detail View </h1>
    <a  data-bind="click:ToggleDisplayMode">Collapse</a>
</div>
</script>

ViewModel = function () {
var self = this ;

self.ToggleDisplayMode = function() {

    self.DisplayMode() == 'simple' ? self.DisplayMode('detail') : self.DisplayMode('simple');
};

self.GetView = function (contentItem) {

    if (contentItem.DisplayMode() == "simple")
        return "SimpleView";
    else
        return "DetailView";
 };
}

ContentItem = function() {
var self = this;

self.DisplayMode =  ko.observable("simple"); 
}

これは非常にうまく機能し、誰かが単純なビューと詳細なビューのどちらを見たいかに基づいて、さまざまなビューの表示を切り替えます。

私がやりたいのは、jqueryuiエフェクトライブラリを使用して詳細ビューが下にスライドするように、いくつかの遷移エフェクトを適用することです。

これにいくつかの効果を適用できるように、これがどのように可視性の切り替えを傍受することができるのか/どうなるのか疑問に思います。

4

1 に答える 1

3

1つのオプションは、ここでafterRender説明するように、テンプレートバインディングのコールバックを使用することです。

私は実際、このタイプのものにはカスタムバインディングを使用することを一般的に好みます。カスタムバインディングに関するドキュメントはここにあり、私が持っている投稿はここにいくつかの一般的な例を示しています。

あなたの場合、カスタムバインディングは次のように単純である可能性があります。

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
      var duration = ko.utils.unwrapObservable(valueAccessor());
      $(element).hide().slideDown(duration); 
  }
};

このinit関数は、要素が最初にバインドされたときにのみ実行されます。この場合、テンプレートが変更されると、要素が再度レンダリングされます。これにより、要素がすぐに非表示になり、次にスライドします。

こちらのサンプル：http：//jsfiddle.net/rniemeyer/mEAJR/

于 2013-01-09T14:47:55.423 に答える