Question

我正在使用backbone.js创建一个页面。我的代码包含许多模型和视图。我想知道是否有可能销毁一个视图，然后在不刷新页面的情况下重绘它，如果是，那么最好的方法是什么。

$(document).ready(function() {
    var myHomeCollectionView = new MyHomeCollectionView({});
});

var MyHomeCollection = Backbone.Collection.extend({
    model: MyHome
});

var MyHomeCollectionView = Backbone.View.extend({
    el: "#home",
    initialize: function(options){
        _.bindAll(this, 'render');

        this.collection = new MyHomeCollection();

        /-- Rest initialize the code --/
    },

    render: function(){
        /-- Render code --/
    }
})

这是我的观点的示例代码..

Answer 1

是。这当然是可能的。 JS框架的主要好处是能够在不刷新的情况下更改页面内容。

我不确定你为什么要破坏视图，这通常是没有必要的。

如果您只是想重新渲染相同的视图，通常只需要侦听一个事件然后调用渲染。请看下面根据重新加载集合重新渲染视图的示例。

var MyHomeCollectionView = Backbone.View.extend({
  el: "#home",
  initialize: function(options){
    _.bindAll(this, 'render');

    this.collection = new MyHomeCollection();

    // re-render view when collection is reloaded
    this.listenTo(this.collection, 'reset sync', this.render);

    /-- Rest initialize the code --/
  },

  render: function(){
    /-- Render code --/
  }
})

或者您可以使用其他视图替换视图。您只需将另一个视图渲染到同一个元素中即可。看看这个jsfiddle有一个非常简单的例子：http://jsfiddle.net/1g1j7afa/2/。

如果您想获得更高级的功能，可以查看Marionette LayoutView。这是一种处理子视图添加/替换的好方法。

如何在不刷新整个页面的情况下销毁和重绘视图？

1 个答案: