[javascript] backbone.js - 회 전자 표시 방법 및시기


3 Answers

jQuery ajaxStart와 ajaxStop을 사용할 수있다. 그것들은 ajax 요청이있을 때 전역 적으로 실행될 것이므로 가져 오기와 저장은 실행될 것이다. 코드를 추가하여 시작 부분에 회 전자를 표시하고 끝에 숨 깁니다.

Question

백본에 어떤 종류의 고리가있어 "컬렉션이 데이터를 가져 오거나 회 전자를 보여 주거나 완료 될 때 숨길 때마다"쉽게 말할 수 있습니까?

나는 그것보다 복잡 할 것이고 특정 기능을 덮어 써야한다고 생각한다. 회 전자를 언제 보여야합니까? fetch() 또는 refresh() 또는 다른 것에?




백본을 무시하지 않고이 작업을 수행 한 방법은 다음과 같습니다.

보기에

var myView = Backbone.View.extend({
  initialize; function(){

    this.$el.addClass('loading');
    collection.fetch(success:function(){
      this.$el.removeClass('loading')
    })
  }
})

다른 경로는 모델이 추가 될 때 로딩 클래스를 제거하는 것입니다. 일반적으로 다음과 같습니다.

var myView = Backbone.View.extend({
  initialize; function(){
    _.bindAll(this, 'addAll')
    collection.bind('reset', this.addAll)

    this.$el.addClass('loading');
    collection.fetch();
  },
  addAll: function(){
    this.$el.removeClass('loading');
    collection.each(this.addOne);
  }
})

이것들은 대부분의 경우 거의 동일 할 것이고, 로더는 내용을 표시하기 바로 전에 제거하는 사용자 경험을 위해 실제로 의미가 있습니다.




어떤 모델에서도 sync 라는 메서드를 만들면 backbone.js가이를 호출하여 동기화합니다. 또는 간단히 Backbone.sync. 메서드를 바꿀 수 있습니다 Backbone.sync. 이렇게하면 소스 코드에서 한 곳에서만 변경 작업을 수행 할 수 있습니다.




백본 동기화 방법을 사용하십시오. 매번 백본 동기화 방법을 호출 할뿐 아니라 가져 오기, 저장, 업데이트 및 삭제도합니다.

/ * 직접적인 아약스를 제외하고는 요청이 들릴 때마다 동기화 응용 프로그램을 통해 라이딩 * / /

Backbone._sync = Backbone.sync;
Backbone.sync = function(method, model, options) {
    // Clone the all options
    var params = _.clone(options);

params.success = function(model) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.success)
        options.success(model);
};
params.failure = function(model) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.failure)
        options.failure(model);
};
params.error = function(xhr, errText) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.error)
        options.error(xhr, errText);
};
// Write code to show the loading symbol
     //$("#loading").show();
Backbone._sync(method, model, params);
};



Related