淘汰賽拆開包裝觀察到不按預期

我做了一個圖標，自定義綁定，如果我做這樣的事情淘汰賽拆開包裝觀察到不按預期

<div data-bind="icon: 'icon-name'"></div>

我想要的圖標是可變的工作正常所以在我的視圖模型我有：

var element = { 
    icon: ko.computed(function() { 
    return 'icon-' + iconType(); 
    } 
}

在我的HTML我有：

<div data-bind="icon: ko.utils.unwrapObservable(icon)"></div>

但是，這是行不通的。需要注意的是，如果我之前插入另一個這樣的div：

<div data-bind="text: ko.utils.unwrapObservable(icon)"></div>

我得到一個div與我想要的圖標的確切名字，讓我們說「圖標-1」。
所以我的猜測是，unwrapObservable不會給我我需要的格式的文本。

任何想法如何解決這個問題？

的圖標結合：

ko.bindingHandlers.icon = { 
     init: function(element, valueAccessor) { 
      var icon = ko.unwrap(valueAccessor()); 
      $(element).html(icons[icon]); 
     } 
}

來源

2016-01-21 Dragos

爲什麼你認爲你需要在這裏使用'unwrapObservable'？ –

如果我使用icon：圖標和文本：圖標 – Dragos

，我得到完全相同的結果我使用unwrap嘗試獲取計算元素的值以與我的自定義綁定一起工作，正如我在第一行中所說的那樣 – Dragos

相反的init，你需要處理update，對當值的變化，這是做什麼用的計算髮生的事情：

ko.bindingHandlers.icon = { 
    update: function(element, valueAccessor) { 
     var icon = ko.unwrap(valueAccessor()); 
     $(element).html(icons[icon]); 
    } 
}

您應該然後是能夠正常綁定，無需在綁定內打包數值：

<div data-bind="icon: icon"></div>

至於init，the documentation說：

淘汰賽會要求您使用綁定的每個DOM元素的初始化函數一次。主要有兩種用途的init：

要設置任何初始狀態的DOM元素

要註冊任何事件處理程序，使得，例如，當用戶點擊或修改的DOM元素，可以更改相關的可觀察的狀態

IE它沒有必要在這裏，你可以做你通過update需要的一切。

來源

2016-01-21 13:19:21

哦，你說得對，看錯了方向，謝謝！ – Dragos

淘汰賽拆開包裝觀察到不按預期

回答

相關問題