knockout.js動畫的聲明性鏈接？

Question

在試圖爲特效添加knockout.js UI時，我發現我經常有幾個部分基於條件進行替換。這樣的一個例子可以是列表視圖中的細節窗格，其在沒有選擇元素時顯示指示。這很好地聲明使用可見的綁定 - 但是當您嘗試向混合添加動畫時，它會變得很短，因爲沒有鏈接顯示/隱藏動畫。

我已經簡化動畫knockout.js這裏舉例證明：

http://jsfiddle.net/yq5rS/

雖然我大概可以砍的東西，我在找做這種的更地道knockout.js方式的鏈接。

我已經考慮了幾個解決方案：

• 有一個自定義綁定捕獲的條件和元素在開啓和關閉狀態顯示的容器元素。
• 使「動畫可見」綁定依賴於條件和檢查其他元素是否隱藏的函數。

編輯：爲了清楚起見，我希望在淡入之前發生一個元素的淡出。謝謝喬希。

Answer 1

這種方法創建一個計算觀察到的，看起來布爾觀察到，以確定要顯示的文字。

這裏有一個工作jsfiddle。http://jsfiddle.net/yq5rS/10/

而這裏的代碼進行快速的想法

的Html

<div class='liveExample'> 
    <p> 
     <label> 
      <input type='checkbox' data-bind='checked: display' /> 
      Active? 
     </label> 
    </p> 

    <p data-bind='fadeVisible: IsActive()'></p>  
</div>​ 

腳本

var Model = function() { 
    var self = this; 
    self.display= ko.observable(false); 
    self.IsActive = ko.computed(function() { 
     if (self.display()) return "Active." 
     return "Not active." 
    }); 
}; 


ko.bindingHandlers.fadeVisible = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    }, 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    } 
}; 

ko.applyBindings(new Model());​ 

編輯

我最初的反應並沒有淡出，等待，然後褪色回去。這裏是一個更新的fadeVisible結合處理

ko.bindingHandlers.fadeVisible = { 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).fadeOut('slow', function() { 
      $(element).html(ko.utils.unwrapObservable(value)).fadeIn(); 
     }); 
    } 
}; 

Answer 2

可能適用於您的一種方法不是在同一個空間中顯示兩個元素並在它們之間切換，而是使用一個自定義綁定來淡化它，交換內容然後淡入。我認爲這可以很好地適用於你的jsfiddle鏈接。

看看Ryan Niemeyer's blog和鏈接JSFiddle。他褪色的方式改變了總的計算觀察值似乎適用於你的交換div例子。

我知道你可能比在兩個div之間切換更復雜的任務......但可能有辦法將解決方案擴展到更一般的情況。我不是模板專家，但你與他們合作過嗎？特別是dynamically changing templates的template { name: function() {} }語法？

（我想這正式讓我尼邁耶變形金剛迷，但我不以爲恥:-P）