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

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框架的主要好处是能够在不刷新页面的情况下更改页面内容。

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

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

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。这是处理子视图 adding/replacing 的好方法。

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

How can I destroy and redraw a view without refreshing the entire page?

html

javascript

jquery

view

backbone.js