我是骨干新手，只是学习基础知识。我正在建立一个带骨干的图片库。我正在显示图像的大版本。路由工作正常。当一个带有 id 的 url 被传递时，适当的 JSON 被加载到模型中，并且 html 被注入到 dom 中。一切都按预期显示。
但是，我尝试为不存在的图像输入 JSON 的 url，并注意到该视图仍然呈现，但之前呈现的视图的属性（图像 url）仍然存在。如何确保刷新视图 - 所有空属性？还是需要刷新的模型？
注意：我正在重用视图以避免创建和破坏视图本身的开销。
这是有问题的观点：
var ImageView = Backbone.View.extend({
template: Handlebars.compile(
'<div class="galleryImageSingle">'+
'<h2>{{title}}</h2>' +
'<img id="image" src="{{imageUrl}}" class="img-polaroid" />' +
'<div class="fb-share share-btn small"><img src="img/fb-share-btn- small.png"/></div>'+
'</div>' +
'<div class="black-overlay"></div>'
),
initialize: function () {
this.listenTo(this.model, "change", this.render);
//this.model.on('change',this.render,this);
},
fbSharePhoto: function () {
console.log('share to fb ' + this.model.attributes.shareUrl)
},
close: function () {
//this.undelegateEvents();
this.remove();
},
render: function () {
this.$el.html(this.template(this.model.attributes));
this.delegateEvents({
'click .fb-share' : 'fbSharePhoto',
'click .black-overlay' : 'close'
});
return this;
}
})
这是路由器：
var AppRouter = Backbone.Router.extend({
routes: {
"" : "dashboard",
"image/:iId" : "showImage",
},
initialize: function () {
// this.galleriesCollection = new GalleriesCollection(); //A collection of galleries
// this.galleriesCollection.fetch();
this.imageModel = new Image();
this.imageView = new ImageView ({ model: this.imageModel });
},
dashboard: function () {
console.log('@AppRouter show dashboard - hide everything else');
//$('#app').html(this.menuView.render().el);
},
showImage: function (iId) {
console.log('@AppRouter showPhoto() ' + iId);
this.imageModel.set('id', iId);
this.imageModel.fetch();
$('#imageViewer').html(this.imageView.render().el);
}
});
模型是否仍然具有旧信息或视图，或两者兼而有之？
对于额外的功劳，我如何通过不触发相应的视图来检测到无法获取和响应它？还是我错了？
提前感谢您的任何建议。
///////////////////////////////////////// ///////////////////////
看起来我发现了一些有用的东西。我认为正确地提出问题的过程有助于回答它。（我不允许回答这个问题，所以我会在这里发布我发现的内容）
在这种情况下，它似乎是需要刷新的模型。在应用程序路由器中，当我调用 showImage 函数时，我会在调用 fetch 之前清除模型并将其值重置为默认值，这起到了作用。具有讽刺意味的是，这里的技巧是显示损坏的图像标签。
showImage: function (iId) {
console.log('@AppRouter showPhoto() ' + iId);
this.imageModel.clear().set(this.imageModel.defaults);
this.imageModel.set('id', iId);
this.imageModel.fetch();
$('#imageViewer').html(this.imageView.render().el);
}
对于我自己的额外信用提议：如果发生错误（如果需要 fetch() 接受选项哈希中的成功和错误回调）。仍然绝对愿意听到有关框架中包含的这样做的方法。