Tuesday, 10 September 2013

problems wrapping my head around how to specify a index_id via a router in Backbone

problems wrapping my head around how to specify a index_id via a router in
Backbone

I am trying to set up a simplest possible backbone app that iterations
through a set of images.
I want the following urls to affect the app below and have put //??? in
comments where the issue is:
urls:
http://localhost:3000/arc/location2/8 -> route to startapp
http://localhost:3000/arc/location2/8#image/1 -> route to image with
collection.at(1)
http://localhost:3000/arc/location2/8#image/2 -> route to image with
collection.at(2)
code:
var imgsArray=[{'url':'/tmp-images/surf.jpg'},
{'img':'/tmp-images/jamaica.jpg'},
{'url':'/tmp-images/jamaica-2.jpg'}
];
arc.Image=Backbone.Model.extend({});
arc.Images=Backbone.Collection.extend({model:arc.Image});
var imgs=new arc.Images(imgsArray);
console.log(imgs.length);
var img=new arc.Image(imgsArray[0]);
arc.ItemView = Backbone.View.extend({
el: $('#mig-container'),
initialize:function(){
this.model=this.collection.at(0);
this.render(this.model);
},
render:function(){
var html=this.model.get('url');
this.$el.html(html);
return this;
}
});
var imgView=new arc.ItemView({collection:imgs});
var HexApp = Backbone.Router.extend({
routes: {
"": "startapp",
"image/:index_id": "image"
},
startapp:function(){
console.log("within startapp");
imgView.render();
},
image:function(index_id){
console.log("within image: " + index_id);
imgView.model=this.collection.at(index_id); //??? no idea how to
manipulate this
}
});
hex={};
var app_router = new HexApp();
Backbone.history.start();
How would I set the collection at the index specified by the index_id? Or
is there a more idiomatic way to specify this?
thx in advance

No comments:

Post a Comment