knockoutのcustom-binding

Knockout Advent Calendar 2015

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<img data-bind="src:['http://lorempixel.com/',resource]"/>

JavaScript

function VM(){
    var vm = this;
    this.resource =null;
    setTimeout(function(){
        vm.resource="400/200";
    },500);
    
    setTimeout(function(){
        vm.resource=null;
    },4000);
    
    setTimeout(function(){
        vm.resource="400/180";
    },5000);
    
    ko.track(this)
}

ko.bindingHandlers['src']= {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var src = valueAccessor().map(function(item){return ko.unwrap(item)});
        if(src.indexOf(undefined)==-1 && src.indexOf(null)==-1){
            element.setAttribute('src',src.join(''));
        }else{
            element.removeAttribute('src');
        }
    }
}

ko.punches.enableAll();
ko.applyBindings(new VM());