私はバックボーンが初めてで、基本を学んでいます。バックボーンで画像ギャラリーを構築しています。画像の大きなバージョンを表示しています。ルーティングは正常に機能しています。URL が ID とともに渡されると、適切な 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() はオプション ハッシュで成功とエラーのコールバックを受け入れます)。フレームワークに組み込まれているこれを行う方法については、まだ間違いなく耳を傾けています。