knockout.js - 数据绑定属性默认值答案

【问题标题】：knockout.js - data-bind attr default valuesknockout.js - 数据绑定属性默认值
【发布时间】：2016-10-07 15:57:27
【问题描述】：

我有一个带有 attr 绑定的简单 html 元素：

<img src="defaultImage.png" alt="default" data-bind="attr: {src: imgUrl, alt: imgAlt}" />

我想做的是有一个自定义扩展器来获取 src 和 alt 的默认值，并自动将它们初始化为 Knockout observables。

对于值或文本绑定有很多示例，但对于任意 attr 绑定则没有。

这可能吗？

【问题讨论】：

你有没有尝试过任何方法？目前还不完全清楚你在追求什么，可能是因为这个问题非常广泛，因为有很多方法可以做到这一点。（“这可能吗？”，没有冒犯，答案是“是”；就目前而言，这篇文章更像是一个伪装的待办事项，而不是一个问题）

标签： html knockout.js

【解决方案1】：

这很脏，但如果你没有很多地方应该写它会有所帮助：

<img src="defaultImage.png" alt="default" data-bind="attr: { src: imgUrl() || 'defaultUrl', alt: imgAlt() || 'defaultAlt' }" />

【讨论】：

【解决方案2】：

我也有同样的要求——以为这个例子只适用于 img 标签 属性，它可以很容易地扩展到所有属性：

ko.bindingHandlers.src = {
    update: function (element, valueAccessor) {
        ko.bindingHandlers.attr.update(element, function () {
            return {src: valueAccessor()};
        });
    }
};

用法：

<img data-bind="src: imgUrl" />

上面的自定义绑定将遵循经典的方式，首先你将初始化 observable，然后更新 image src 属性 - 这意味着 img src 也将采用敲除 observable 的默认初始化值。

如果需要反向方式，可以使用自定义绑定初始化回调：

ko.bindingHandlers.src = {
  init: function(element, valueAccessor) {
    var value = valueAccessor();
    value(element.src);
  },
  update: function(element, valueAccessor) {
    ko.bindingHandlers.attr.update(element, function() {
      return {
        src: valueAccessor()
      };
    });
  }
};

标记中的用法是一样的，但是初始化时的效果是相反的。

这是一个 Plunker：https://plnkr.co/edit/CwI6KGirOkb3XpgS0Dj8?p=preview

【讨论】：