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

I am using backbone.js to create a page. My code contains many models and views. I wonder if it is possible to destroy a view and then redraw it without refreshing the page, and if so, what is the best way to do it.

我正在使用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 --/
    }
})

this is a sample code of my view..

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

1 个解决方案

#1

Yes. It is certainly possible. The main benefit of a JS framework is being able to change the content of the page without refreshing it.

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

I am not sure why you want to destroy the view, that is usually not necessary.

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

If you simply want to re-render the same view, you usually just listen for an event then call render. Take a look at the example below of re-rendering your view based on when the collection reloaded.

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

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 --/
  }
})

Or you can replace a view with another view. You can do this by simply rendering another view into the same element. Check out this jsfiddle for a very simple example of this: http://jsfiddle.net/1g1j7afa/2/.

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

If you want to get more advanced, you can check out Marionette LayoutView. It is a nice way to handle the adding/replacing of sub views.

如果您想要更高级,可以查看Marionette LayoutView。这是处理子视图的添加/替换的好方法。

#1