Knockoutjs自定義綁定顯示加載gif

Question

我想創建一個自定義綁定，將顯示內容加載時加載gif。

ko.bindingHandlers.loader = { 
    init: function (element) { 
     $('<div>').addClass('loader').hide().appendTo($(element)); 
    }, 
    update: function (element, valueAccessor) { 
     var isLoading = ko.utils.unwrapObservable(valueAccessor()); 
     var $element = $(element); 
     var $children = $element.children(':not(.loader)'); 
     var $loader = $(element).find('.loader'); 

     if(isLoading) { 
      $children.stop(true).css('visibility', 'hidden').attr('disabled', 'disabled'); 
      $loader.stop().fadeIn(); 
     } else { 
      $loader.stop(true).fadeOut(function() { 
       $children.css('visibility', 'visible').removeAttr('disabled'); 
      }); 
     } 
    } 
}; 

我可以在div.loader被附加到element初始化看看，可以看到更新功能火的時候isLoading更改爲真。但是，一旦圖像加載（通過加載我的意思是每個圖像在各自的加載事件上返回一個已解決的承諾），我沒有看到一旦isLoading設置爲false就會觸發更新。

視圖模型

function viewModel() { 
    var self = this; 

    self.movies = ko.observableArray([]); 
    self.searchValue = ko.observable(); 
    self.isLoading = ko.observable(false); 

    self.search = function() { 
     self.isLoading = true; 
     $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) { 
      self.movies(data); 
      $.when.apply($, promises).done(function() { 
       setThumbnailHeight(function() { 
        self.isLoading = false; 
       }); 
      }); 
     }); 
    }; 
    var setThumbnailHeight = function(callback) { 
     var $items = $('.thumbnails li'); 
     var maxHeight = Math.max.apply(null, $items.map(function() { 
      return $(this).innerHeight(); 
     }).get()); 
     $items.css('height', maxHeight); 
     callback(); 
    }; 

} 

ko.applyBindings(new viewModel()); 

setThumbnailHeight被稱爲在正確的時間（一旦所有的承諾已經解決），並且工作正常，在我看到它的每個li的高度設置到最大高度，可以看到回調（在這種情況下function(){ self.isLoading = false; }被調用。

我結合

<ul class="content thumbnails" data-bind="foreach: movies, loader: $root.isLoading"> 
    <li class="movie"> 
     ... 
    </li> 
</ul> 

所以簡單回顧一下，問題是，當isLoading設置爲true時，加載gif會顯示，但不會隱藏並顯示新加載的內容，當它重新設置爲false時。

Answer 1

所有可觀測值都是函數，因此您無法使用=爲其分配值。使用self.isLoading(true);而不是self.isLoading = true;

self.search = function() { 
    self.isLoading(true); 
    $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) { 
     self.movies(data); 
     $.when.apply($, promises).done(function() { 
      setThumbnailHeight(function() { 
       self.isLoading(false); 
      }); 
     }); 
    }); 
}; 

function(){ self.isLoading(false); }