我正在尝试设置一个最简单的骨干应用程序,它可以迭代一组图像。
我希望以下网址能够影响下面的应用并放置// ???在评论中,问题是:
网址:
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)
代码:
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);
// get Uncaught TypeError: Cannot call method 'at' of undefined in Chrome
imgView.model=this.collection.at(index_id); //??? no idea how to manipulate this
}
});
hex={};
var app_router = new HexApp();
Backbone.history.start();
如何在index_id指定的索引处设置集合?或者是否有一种更惯用的方式来指定它?
事先提前答案 0 :(得分:2)
路由器无法解析this.collection
;这将指的是您没有定义的路由器实例中的collection
属性。相反,您需要使用以下内容:
imgView.model = imgs.at(index_id);
imgs
是您早期用来存储您定义的集合实例的变量。
答案 1 :(得分:0)
如果我正确理解你的问题,你就有一个应用程序初始状态呈现集合中的第一个图像。当您点击image
路线时,您希望使用所选图像重新渲染imgView
,对吗?
看看它看起来的代码你几乎已经得到了它。您需要做的最后一件事是在更新模型后重新渲染视图:
image:function(index_id){
console.log("within image: " + index_id);
imgView.model=this.collection.at(index_id);
// re-render
imgView.render();
}
否则,我认为结构适用于示例应用程序。您需要修复imgsArray
中第二项的声明,因此密钥为url
与img
。 :)