모델보기를 시작하기 전에 대기하는 방법

Question

나는 기본적인 trello 복제본을 만들고 있습니다. 로그인하는 대신 프로젝트에 슬러그가 발생합니다 (예 : 'www.example.com/1d754b6c')

사용자가 루트를 방문하면 백엔드에 새 슬러그가 생성됩니다. 그런 다음 사용자는 www..com/1d754b6c로 라우트되고, 다른 ajax 호출이 전송되어 프로젝트 ID를 얻습니다. 그러면보기가 시작됩니다. 그러나 내보기 전에 슬러그 -> ID 아약스 호출이 완료되기 시작했습니다. 이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

Buckets.Routers.PageRouter = Backbone.Router.extend({ 
    routes: { 
     '': 'newProject', 
     ':token': 'displayProject' 
    }, 
    newProject: function() { 
     new Buckets.Models.Project({}); 
    }, 
    displayProject: function (token) { 
     var that = this; 
     var project = new Buckets.Models.Project({token: token}); 
     setTimeout(function(){ 
      new Buckets.Views.showProject({ 
          model: project 
         }); 
     }, 500); 

    } 
}); 

project.js

Buckets.Models.Project = Backbone.Model.extend({ 
    url: function() { 
     return Buckets.BASE_URL + '/api/projects/' + (this.id) 
    }, 
    initialize: function(options) { 
     var that = this; 
     if (options && options.token) { 
      that.token = options.token 
      $.ajax({ 
       url: Buckets.BASE_URL + '/' + that.token, 
       dataType: 'json', 
        success: function(data, status){ 
         that.id = data; 
        }, 
        error: function(xhr, textStatus, err) { 
         console.log(xhr); 
        } 
       }); 
     } else { 
      $.ajax({ 
        url: Buckets.BASE_URL + '/api/projects/new', 
        dataType: 'json', 
        success: function(data, status){ 
         that.token = data.token; 
         that.id = data.id; 
         Buckets.Routers.router.navigate('/' + that.token, true); 
        }, 
        error: function(xhr, textStatus, err) { 
         console.log(xhr); 
        } 
       }); 
     } 
     return this; 
    }, 
}); 

Answer 1

사용하려고를

router.js (I 현재 임시 패치로의 setTimeout을 가지고, 나는이 작업을 수행 할 수있는 좋은 방법이 아니라는 것을 알고) Backbone.Model.sync. .sync()은 약속을 반환하므로 Deffered/Promises 표준을 최대한 활용할 수 있습니다.

변수 URL을 가져 오기로 전달할 때 model.fetch()을 덮어 씁니다. 당신 된 구현을 위해 내가 먼저 initialize()에 $.ajax 스크랩 것 결국 약속입니다 sync()의 결과를 반환이

Buckets.Models.Project = Backbone.Model.extend({ 
    fetch: function(options) { 
     var that = this; 
     if (options && options.token) { 
     this.url = Buckets.BASE_URL + '/' + that.token; 
     else 
     this.url = Buckets.BASE_URL + '/api/projects/new'; 

     return Backbone.Model.prototype.fetch.call(this, options); 
} 

.fetch() 같은 fetch 우선합니다. 그 의미에 Router이 작업을 수행 할 것 :

displayProject: function (token) { 
    var that = this; 
    var project = new Buckets.Models.Project(); 
    $.when(project.fetch({token: token}) 
    // deffered.done() replaces the success callback in your $.ajax 
    .done(function() { 
    project.id = data; 
    new Buckets.Views.showProject({ model: project }); 
    }) 
    // deffered.fail() replaces the error callback in your $.ajax 
.fail(function(jqXHR, textStatus, errorThrown) { 
    console.log(jqXHR); 
}); 
} 

그리고 완전성에 대해

, 당신은 유사 newProject()을 reweite 것,

newProject: function() { 
    var project = new Buckets.Models.Project(); 
    $.when(project.fetch({token: token}) 
    .done(function(data, textStatus, jqXHR) { 
    project.token = data.token; 
    project.id = data.id; 
    new Buckets.Views.showProject({ model: project }); 
    }) 
    .fail(function(jqXHR, textStatus, errorThrown) { 
    console.log(jqXHR); 
    }); 
} 

를 사용해보십시오. 내가 가장 선호하는 Backbone 프레임 워크 중 하나 인 MarionetteJS의 주요 공헌자가 나에게 추천했을 때이 가져 오기 방법을 사용하기 시작했습니다. 이 방법은 유지하기 쉽고 반응이 좋습니다.