Backbone.js를 사용하여 Bootstrap Modal에 API 결과를로드하는 방법

Question

Backbone.js로 빌드 한 내 webapp에서 부트 스트랩 모달을 열려고합니다. 이렇게하려면 github의 backbone.bootstrap-modal을 사용합니다. 이 코드를 사용하여 보여

var ListUsersModalView = Backbone.View.extend({ 
    render: function() { 
     this.$el.html($('#my-modal-template').html()); 
     return this; 
    } 
}); 

: : 지금 모델로 API 호출에서 모델의 목록을로드하려고

new Backbone.BootstrapModal({ 
    animate: true, 
    content: new ListUsersModalView() 
}).open(); 

간단한 모달을로드 할 때 쉽게 사용할 수 있습니다. 이제 다음 코드를 얻었습니다 :

var ListSupportersModalView = Backbone.View.extend({ 
    el: '#div-for-list-of-names', 
    render: function() { 
     var that = this; 
     var users = new UserCollection(); 
     users.fetch({ 
      success: function() { 
       var template = _.template($('#my-modal-template').html(), {users: users.models}); 
       that.$el.html(template); 
       return that; 
      } 
     }); 
    } 
    return that; 
}); 

이것은 작동하지 않으며 그 이유를 이해합니다. 로드 된 컬렉션을 포함하여 this을 반환해야합니다. 불행하게도 사용자는 비동기 적으로 가져 오므로 마지막 return that;에는 usermodels이 포함되지 않습니다.

질문은 지금이다; 어떻게 해결할 수 있을까요? 어떻게 모델을 API 호출에서 모달로로드 할 수 있습니까? 모든 팁을 환영합니다!

Answer 1

내 의견으로는 Jquery의 연기 된 객체가 가장 좋은 방법입니다.

이렇게하면 나중에 코드에서 처리 할 "약속"을 반환 할 수 있습니다. 일단 약속을 해결하거나 거절하면 데이터를 표시하거나 거부 한 경우 오류를 표시 할 수 있습니다. 에 대한

var listUsersModalView = new ListUsersModalView(); 

//get the users and this will return the prmoise; 
var listUsersModalViewPromise = listUsersModalView.getUsers(); 


//set up listen for when the promise is resolved/rejected 
$.when(listUsersModalViewPromise).done(function() { 


    //only change i have made is to pass the listUserModalView that has already 
    //been initialized as this will now have a fetched user collection 
    new Backbone.BootstrapModal({ 
     animate: true, 
     content: listUsersModalView 
    }).open(); 
}).fail(function() { 
    //do something here to show that an error occured? 
});