帶轉換的動態挖空模板

我正在使用模板綁定呈現的列表上工作。這些物品有一個摺疊和展開的視圖，由單個物品的可觀察屬性決定。這是通過向模板名稱提供一個函數來完成的（就像在挖空文檔中一樣）。到目前爲止，一切都很順利。現在..這個問題。我想在更改模板時爲過渡設置動畫。到目前爲止，我已經設法爲「In-Transition」（帶有afterRender事件）設置動畫效果，即當新模板加載時。但是我也希望在刪除舊模板之前爲其創建一個「Out-transition」。這是我現在有多遠。 http://jsbin.com/UvEraGO/15/edit?html,js,output 帶轉換的動態挖空模板

任何想法，我怎麼能實現這種「外出」？

下面是代碼：

[viewmodel.js] 
var vm = { 
    items: [{name: 'John', age:'34', expanded: ko.observable(false)}, 
      {name: 'David', age:'24', expanded: ko.observable(false)}, 
     {name: 'Graham', age:'14', expanded: ko.observable(false)}, 
     {name: 'Elly', age:'31', expanded: ko.observable(true)}, 
     {name: 'Sue', age:'53', expanded: ko.observable(false)}, 
      {name: 'Peter', age:'19', expanded: ko.observable(false)}] 


}; 

vm.myTransition = function(el){ 
    $(el[1]).hide().slideDown(1000); 
}; 

vm.templateSelector = function(item){ 
    return item.expanded() ? 'expanded_template' : 'collapsed_template'; 
}.bind(vm); 

vm.toggleTemplate = function(item){ 
    item.expanded(!item.expanded()); 
}; 

ko.applyBindings(vm);

和HTML：

<div data-bind="template: { name: templateSelector, foreach: items, afterRender: myTransition }"></div> 

<script type="text/html" id="collapsed_template"> 
    <div style="min-height: 30px"> 
     <strong>Name: <span data-bind="text: name"></span></strong> 
     <button data-bind="click: $parent.toggleTemplate">Expand</button> 
     <div> 
</script> 

<script type="text/html" id="expanded_template"> 
    <fieldset style="height: 100px; min-height: 8px"> 
     <legend> 
      <strong>Name: <span data-bind="text: name"></span></strong> 
     </legend> 
     <div> 
      Age: <span data-bind="text: age"></span> 
      <button data-bind="click: $parent.toggleTemplate">collapse</button> 
     </div> 

    </fieldset> 
</script>

來源

2014-01-23 Galtrold

請編輯您的問題，包括問題的相關代碼，以及（這確保問題仍然相關，即使鏈接腐爛或jsbin改變了事物）。 – Jeroen

一個想到的可能是創造這樣一個slideTemplate結合，並使用你的模板裏面。它看起來是這樣的：

ko.bindingHandlers.slideTemplate = { 
    init: ko.bindingHandlers.template.init, 
    update: function(element, valueAccessor, allBindings, data, context) { 
     //ensure that we have a dependency on the name 
     var options = ko.unwrap(valueAccessor()), 
      name = options && typeof options === "object" ? ko.unwrap(options.name) : name, 
      $el = $(element); 

     if ($el.html()) { 
      $el.slideUp(250, function() { 
       ko.bindingHandlers.template.update(element, valueAccessor, allBindings, data, context); 

       $el.slideDown(1000); 
      }); 
     } 
     else { 
      ko.bindingHandlers.template.update(element, valueAccessor, allBindings, data, context); 
     } 
    } 
};

然後，你會綁定是這樣的：

<ul data-bind="foreach: items"> 
    <li data-bind="slideTemplate: type"> 
    </li> 
</ul>

樣品：http://jsfiddle.net/rniemeyer/6J67k/

來源

2014-01-23 16:11:07

非常感謝..很好，簡單的解決方案。 – Galtrold

帶轉換的動態挖空模板

回答

相關問題