如何使foreach fadeIn和fadeOut在添加和刪除時使用自定義BindingHandlers？

我有一個foreach綁定，顯示來自observableArray的項目列表。我也有添加或刪除項目到該陣列的功能。我想使fadeOut和淡入淡出/添加。我已經通過使用afterAdd和beforeRemove完成了這一步，但現在我必須通過使用自定義綁定來完成。 fadeIn部分不是問題，但我不知道如何在按鈕單擊並刪除li時執行fadeOut。這裏是我的自定義的衰落綁定：如何使foreach fadeIn和fadeOut在添加和刪除時使用自定義BindingHandlers？

ko.bindingHandlers.fadeIn = { 
    init: function(element, valueAccessor) { 
     $(element).hide(); 
    }, 
    update: function(element, valueAccessor) { 
     $(element).fadeIn(1000); 
    } 
};

，這裏是我的html：

<ul data-bind="foreach: terms" class="align-center"> 
    <li data-bind="fadeIn: $data"> 
     <span data-bind="text: ($data.key + ': ' + $data.value)"></span> 
     <span> 
      <a data-bind="click: $parent.removeTerm"> 
       <i class="icon-cancel-circled"></i> 
      </a> 
     </span> 
    </li> 
</ul>

removeTerm只能從陣列中刪除項目，但我需要讓之前淡出。有什麼建議麼？

來源

2016-02-26 Merima Karić

你可以做一個工作jsfiddle嗎？ – gh9

這是一個非常大的項目的一部分，我不能。術語數組正在通過選擇我從服務器獲得的一些搜索建議來填充......我知道這對你們來說會容易得多...希望我能...... –

爲什麼在click存在時創建自定義綁定？只需使用點擊綁定並將您的元素傳遞給包裝fadeOut的函數，並從列表中刪除元素。

<ul data-bind="foreach: terms" class="align-center"> 
<li data-bind="click: LaunchFadeOut($data)">test</li> 
</ul> 


<script type="text/javascript"> 

var vm = function(){ 
    this.LaunchFadeOut= function(element){ 
    $(element).fadeOut(1000); 
    // remove element from whatever array 
    } 
} 
</script>

編輯自定義點擊約束力

ko.bindingHandlers.customClick = { 
     init: function(element, valueAccessor, viewModel) { 
      var value = valueAccessor(); 
       var click = value.click; 
      ko.applyBindingsToNode(element, { click: function() { 
console.log('you were clicked'); 
       return click.apply(this, array.prototype.slice.apply(arguments)); 
      }}, viewModel); 
     } 
    } 

<li data-bind="customClick"></li>

我想強調的是，任何人是讓你重現click結合改變他們的想法。他們正在做的是強制要求和你對付框架。他們這樣做只是因爲他們不希望你使用內置的綁定

來源

2016-02-26 15:55:03 gh9

這是我得到的任務，並且我被指示通過使用自定義綁定來完成。否則，我會簡單地使用我的解決方案與afterAdd和beforeRemove。但你的建議似乎很好......如果我不應該這樣做...謝謝，無論如何！ –

@MerimaKarić更新了我對您需要執行的自定義綁定的解決方案。 – gh9

我已經決定去找第一個解決方案，不用計算什麼:)它乾淨簡單。但現在我有一個問題：未捕獲TypeError：無法讀取未定義的屬性'defaultView'/我已經通過$數據作爲fadeOut方法的參數，如果我控制檯日誌元素它是一個對象，其鍵和值我想fadeOut。但仍然$（元素）.fadeOut（1000）;似乎是一個問題。 –

如何使foreach fadeIn和fadeOut在添加和刪除時使用自定義BindingHandlers？

回答

相關問題