backbone.js 예제는 페이지로드시 실행되지 않지만 디버거에서 호출 될 때 수행합니다.

Question

간단한 backbone.js 예가 있습니다. 페이지로드시 문제가 발생하여 페이지에 아무 것도 표시되지 않습니다. 그러나 크롬 디버거 콘솔에서 명시 적으로보기를 호출하고 render() 메소드를 실행하면 결과가 화면에 올바른 json 데이터와 함께 표시됩니다.

도움이 될만한 정보가 있으면 정말 감사하겠습니다. 여기

var Clients = Backbone.Collection.extend({ 

    model: Client, 
    url: 'api/Contacts' 

}); 

var clients = new Clients(); 


var UserItemView = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template($('#contacts-template').html()), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 


var UserListView = Backbone.View.extend({ 
    el: $('#contacts'), 

    render: function() { 
     this.$el.empty(); 
     var self = this; 

     _.each(this.collection.models, function(model) { 
      self.renderItem(model); 
     }); 
    }, 

    renderItem: function(item) { 
     var itemView = new UserItemView({ 
      model: item 
     }); 

     this.$el.append(itemView.render().el); 
    } 
}); 

는 index.html 페이지에 대한 코드입니다 :

이 끝나면 콜백을해야 모든 비동기 호출이 여기에 당신이이 데이터를 가지고 전에 clients 모음을 사용하려는

<ul id="contacts"></ul> 

<script id="contacts-template" type="text/template"> 

    <%= FirstName %> <%= LastName %> 

</script> 


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> 
<script src="scripts/app/app.js"></script> 
<script> 

    $(document).ready(function() { 

     alert('HI'); // I verified this alert works 

     clients.fetch(); 

     var userListView = new UserListView({ collection: clients }); 

     userListView.render(); 

    }); 

</script> 

Answer 1

섬기는 사람. ,

$(document).ready(function() { 
    alert('HI'); // I verified this alert works 
    clients.fetch(
     success: function() { 
      var userListView = new UserListView({ collection: clients }); 
      userListView.render(); 
     }, 

     error: function() { 
      alert('An error has occurred'); 
     }, 
    ); 
}); 

감사