Question

我是骨干的新手，只是学习基础知识。我正在建立一个骨干图像库。我正在显示图像的大版本。路由工作正常。当使用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（）接受选项哈希中的成功和错误回调）。仍然可以听到关于这样做的方法，这种方式已经融入到框架中。

Answer 1

您可以像这样更新模型：

ImageView.model.set(attributes)

如何在Backbone中刷新视图？

1 个答案: