로딩 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이 true로 변경 될 때 업데이트 기능 불을 볼 수 있습니다. 하지만 일단 이미지가로드되면 (로드 된 각 이미지가 각각의로드 이벤트에서 해결 된 약속을 반환한다는 의미) 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()); 

정확한 시간 (한 번에 모든 약속이 해결 된 것)에 호출되고, 그에서 나는 그것이 최대 높이 각 li의 높이를 설정 참조 제대로 작동 setThumbnailHeight 및 호출되고이 경우 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.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); }