Question

I am having an observable array of image objects, and I wonder how would I render those images from template perspective ?

EDIT:

What I am doint is something like this :

<div data-bind="html: viewBoxImageHTML()">

Where viewBoxImageHTML is a property of an object :

    self.viewBoxImage = ko.observable();
    self.viewBoxImageHTML = ko.computed(function(){
      if(self.viewBoxImage()){
          return self.viewBoxImage();
      }
      return '<p>LOADING IMAGE</p>';
    });

And this viewBoxImage is just an image that is loaded in some async loading method.

Answer 1

I have done it through a custom binder like this:

ko.bindingHandlers.imageBinding = {
update: function (element, valueAccessor) {
    //appends the image to the binded element
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).html(value);
}

};

Sample usage:

<div class="divWithImage"
     data-bind="imageBinding: SomeImageObject">                    
</div>