挖空解包可观察对象无法按预期工作

Knockout unwrap observable does not work as expected

本文关键字：工作 对象 包可 观察      更新时间：2023-09-26

我做了一个图标自定义绑定，如果我做这样的事情，它可以正常工作

<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，上面有我想要的图标的名称，让我们说"icon-1"。
所以我的猜测是 unwrapObservable 不会以我需要的格式为我提供文本。

有什么想法可以解决这个问题吗？

图标绑定：

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

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

Knockout 将针对使用绑定的每个 DOM 元素调用一次 init 函数。初始化有两个主要用途：

  1. 设置 DOM 元素的任何初始状态
  2. 注册任何事件处理程序，以便例如，当用户单击或修改 DOM 元素时，您可以更改关联的可观察量的状态

IE这里没有必要，您可以通过update做您需要的一切。

相关文章：