2

私はBackbone.jsを初めて使用し、いくつかのチュートリアルに従って以下のスクリプトを作成しました。私が達成しようとしているのは、ルートが使用されているときにRESTAPIからJSONデータを取得することです。友達ルートの人の機能を見ると、これでどこに行くのかがわかります。どこが間違っているのですか？

<!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>

people.fetchを実行した後Console.logは

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

console.log（data.toJSON（））;を実行する場合 戻ります

[]
4

1 に答える 1

3

私は次のようにして問題を解決しました。

ルーターの外に新しいコレクションを作成しました。

var people = new FriendDetailCollection;

ビューを作成するときに、以前に作成したコレクションを指定しました。

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

FriendView にタイプミスがありました。以前は _.bind(this, 'render') がありました。する必要がある

_.bindAll(this,'render');

また、FriendView 内の render() 関数に 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());
        }

});
于 2012-09-01T15:58:04.930 に答える