Question

我做了一个图标自定义绑定，如果我做这样的事情

，它可以正常工作

<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，其中包含我想要的图标名称，让我们说＆＃39; icon-1＆＃39;。
所以我的猜测是unwrapObservable没有以我需要的格式提供文本。

任何想法如何解决这个问题？

图标装订：

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

Answer 1

而不是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说：

Knockout将为您使用绑定的每个DOM元素调用一次init函数。 init有两个主要用途：


设置DOM元素的任何初始状态

要注册任何事件处理程序，以便，例如，当用户单击或修改DOM元素时，您可以更改关联的observable的状态

IE在这里没有必要，你可以通过update完成所需的一切。

Knockout unwrap observable不能按预期工作

1 个答案: