Question

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

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

我想要做的是让自定义扩展程序获取src和alt的默认值，并自动将它们初始化为Knockout observables。

有很多示例可以为值或文本绑定执行此操作，但对于任意attr绑定都没有。

这可能吗？

Answer 1

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

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

Answer 2

我有同样的要求 - 认为此示例仅适用于 img标记属性，可以轻松扩展所有属性：

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

用法：

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

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

如果需要相反的方法，可以使用自定义绑定init回调：

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

knockout.js - data-bind attr默认值

2 个答案: