2012-09-01 50 views
1

如何将名称变量从路由器传递给FriendInfocollection?每当我浏览到本地主机/应用/人/ MYNAME的console.log返回本地主机404 /超薄/ index.php文件/人/Backbone.js将变量从路由器传递给集合

有人点我在正确的方向上,因此使用具有收藏分享这个变量正确的网址?

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

两件事** ** 1这句话是不可理解的,我_“每当我浏览到localhost/app/person/MyName console.log返回一个404为localhost/slim/index.php/person /“_ ** 2。**请尽力在最小代码表达式中重现问题,只是复制/粘贴您的整个应用程序代码并让我们开展工作以消除噪音并不是很礼貌。 – fguillen

回答

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 

但是你必须定义th初始化函数中选择E可变

initialize: function (options) 

而且可以肯定,你可以设置模型是这样的:

model.set('name', name) 
+0

他在询问关于将参数传递给collection的问题,为什么你正在回答如何获取? – YuC

+0

你能展示你的代码是什么意思吗? –

+0

假设我们有一个名为XXX的集合,并且它被两个服务使用,所以我们需要为不同的服务使用不同的url。例如。/api/a为第一个服务,/ api/b为第二个服务,所以url函数应该是这样的: 'url:function(){ if(this.type ==='a'){ return'/API/A'; } else { return'/ api/b'; } }' 那么如何在新的集合时将类型参数传递给集合? – YuC

相关问题