2012-09-01 2 views
2

메신저 Backbone.js에 새롭고 아래의 스크립트를 제안하는 몇 가지 자습서를 따라 왔습니다. 내가 달성하고자하는 것은 내 경로가 사용될 때 나머지 API에서 JSON 데이터를 가져 오는 것입니다. 친구 경로에 대한 사람들의 기능을 보면이 곳으로가는 곳을 볼 수 있습니다. 내가 어디로 잘못 가고 있니? people.fetch CONSOLE.LOG 실행 후Backbone.js + REST

<!DOCTYPE html> 
<html> 
<head> 
    <title>I have a back bone</title> 
</head> 
<body> 
    <button id="add-friend">Add Friend</button> 
    <ul id="friends-list"> 
    </ul> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> 
<script> 
Friend = Backbone.Model.extend({ 
    name: null, 
    age: null, 
}); 
FriendDetailModel = Backbone.Model.extend(); 
FriendDetailCollection = Backbone.Collection.extend({ 
    url: 'slim/index.php/friends/', 
    model: FriendDetailModel 

}); 

Friends = Backbone.Collection.extend({ 
    initialize: function(models, options) { 
     this.bind("add",options.view.addFriendLi); 
    } 
}); 
AppView = Backbone.View.extend({ 
    el: $("body"), 
    initialize: function() { 
     this.friends= new Friends(null, {view:this}); 
    }, 
    events: { 
     "click #add-friend": "showPrompt", 
    }, 
    showPrompt: function() { 
     var friend_name = prompt("Who is your friend?"); 
     var friend_age = prompt("What is your friends age?"); 
     var friend_model = new Friend({name: friend_name, age: friend_age}); 

     this.friends.add(friend_model); 
    }, 
    addFriendLi: function(model) { 
     $("#friends-list").append("<li>" + model.get('name') + " " + model.get('age') + "</li>"); 
    } 
}); 
var appview = new AppView; 

AppRouter = Backbone.Router.extend({ 
    routes: { 
     "friends":"people", 
     "person/:name":"personDetail" 
    }, 

    people: function() { 
     console.log('all the people'); 
     var people = new FriendDetailCollection; 
      people.fetch({ 
        success: function(data) { 
          console.log(data); 
        } 

    }, 

    personDetail: function(name) { 
     console.log('one person named ' + name); 
    } 
}); 

var approuter = new AppRouter; 
Backbone.history.start(); 
</script> 
</body> 
</html> 

d 
_byCid: Object 
_byId: Object 
length: 4 
models: Array[4] 
__proto__: x 

를 도시 내가 CONSOLE.LOG 할 경우 (data.toJSON()); 내가 수행하여 문제를 해결 결국

[] 
+1

좀 더 구체적인 질문을 할 수 있습니까? 실제로 실제로 잘못 되었습니까? (예 : 오류, 데이터 없음 등) – jmk2142

+0

몇 가지 추가 정보가 있습니다. 이것에 대한 귀하의 도움에 감사드립니다! –

답변

3

반환 다음

나는 라우터의 외부에서 새 컬렉션을 만든 :

var people = new FriendDetailCollection; 

내가 컬렉션을 지정 뷰를 생성 이전에 만들었습니다.

friendview = new FriendView({collection: people}); 

필자는 FriendView에 오타가 있습니다. 이전에는 _bind (this, 'render')를 사용했습니다. 그것은 또한

_.bindAll(this,'render'); 

해야, 난 내 FriendView 내에서 렌더링() 함수 내 CONSOLE.LOG을 넣어.

FriendView = Backbone.View.extend({ 
     el: $("body"), 
     initialize: function() { 
       _.bindAll(this,'render'); 
       this.collection.bind('reset', this.render); 
     }, 
     render: function() { 
       console.log(this.collection.toJSON()); 
     } 

});