淘汰赛拆开包装观察到不按预期

问题描述：

我做了一个图标，自定义绑定，如果我做这样的事情淘汰赛拆开包装观察到不按预期

<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]); 
     } 
}

为什么你认为你需要在这里使用'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需要的一切。

哦，你说得对，看错了方向，谢谢！ – Dragos

淘汰赛拆开包装观察到不按预期

相关推荐