kickout.js-数据绑定属性默认值

Question

I have a simple html element with an attr binding:

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

What I'd like to do is have a custom extender to take the default value for src and alt and automatically initialize them into the Knockout observables.

There are plenty of examples for doing this for a value or text binding but none for arbitrary attr bindings.

Is this possible?

Answer 1

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

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

Answer 2

I had the same requirement - thought this example is just only for the img tag attribute, it could be easily extended for all attributes:

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

Usage:

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

The custom binding above will follow the classic way, first you will initialize the observable, then the image src attribute is updated - this means, the img src will take also the default initialization value of the knockout observable.

If you need the reverse way, you can use the custom binding init callback:

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

The usage in markup is the same, but the effect at initialization is inverted.

Here is a Plunker: https://plnkr.co/edit/CwI6KGirOkb3XpgS0Dj8?p=preview