1

ルーターからFriendInfocollectionにname変数を渡すにはどうすればよいですか？localhost / app / person / MyNameを参照すると、console.logはlocalhost / Slim / index.php /person/に対して404を返します。

この変数をコレクションと共有して正しいURLを使用するように、誰かが私を正しい方向に向けることができますか？

<!DOCTYPE html>
<html>
<head>
    <title>I have a back bone</title>
</head>
<body>
    <button id="add-friend">Add Friend</button>
    <button id='view-friends'>View Friends</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();
FriendInfoModel = Backbone.Model.extend({
    name: null 
});
FriendDetailCollection = Backbone.Collection.extend({
    url: '../slim/index.php/people/',
    model: FriendDetailModel

});
FriendInfoCollection = Backbone.Collection.extend({
    model: FriendInfoModel,
    url: '../slim/index.php/person/' + name,
});


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;
var people = new FriendDetailCollection;
var person = new FriendInfoCollection({name:'Sean'});

FriendView = Backbone.View.extend({
    el: $("body"),
    initialize: function() {
        _.bindAll(this,'render');
        this.collection.bind('reset', this.render);
    },
    events: {
        "click #view-friends": "fetch_list",
    },
    render: function() {

        var results = this.collection.toJSON();
        $.each(results, function(key, value) {
            var msg = results[key]['firstname'] + " " + results[key]['lastname'];
            console.log(msg);
        });
    },
    fetch_list: function() {
                people.fetch({
                        success: function(data) {
                                //console.log("success");
                        }
                });

    }

});

FriendInfoView =  Backbone.View.extend({
        el: $("body"),
        initialize: function(name) {
                _.bindAll(this,'render');
                this.collection.bind('reset', this.render);
        },
        render: function(name) {
                var results = this.collection.toJSON();
                $.each(results, function(key, value) {
                        var msg = results[key]['firstname'] + " " + results[key]['lastname'];
                        console.log(msg);
                });
        }

});


friendview = new FriendView({collection: people});
friendinfoview = new FriendInfoView({collection: person});
AppRouter = Backbone.Router.extend({
    routes: {
        "friends":"people",
        "person/:name":"personDetail"
    },

    people: function() {
        console.log('all the people');
        people.fetch({
            success: function(data) {
                //console.log("success");
            }
        });

    },

    personDetail: function(name) {
        person.fetch({
                        success: function(data) {
                                console.log("success");
                        }
                });

        console.log('one person named ' + name);
    }
});
var approuter = new AppRouter;
Backbone.history.start();
</script>
</body>
</html>
4

1 に答える 1

2

次のようにルーターを定義する必要があります。

var AppRouter = Backbone.Router.extend({
    routes: {
        'name/:name'                : 'getPerson'
    },
getPerson: function(name) {
    var callperson = new Person.Details({
        name        :   name
    });
}

domの準備ができたらルートをインスタンス化します

    app_router = new AppRouter;

これで、ビューで次のような名前にアクセスできます。

    this.options.name

ただし、初期化関数内でオプション変数を定義する必要があります

    initialize: function ( options )

そして確かにあなたはこのようにモデルを設定することができます：

    model.set('name', name)
于 2012-09-02T12:06:08.163 に答える