是否正确替换相同位置的内容而不使用Backbone.js删除以前的内容模型?

时间:2013-01-10 19:01:02

标签: javascript jquery backbone.js

我有一个使用Backbone.js开发的Web应用程序。在应用程序中,有一些按钮可以删除内容视图,但在推送时不会删除内容模型。例如,如果我多次按下相同的按钮,则会替换内容,但不会删除该内容的模型。 我该如何删除它?

我知道如何使用其他不同的按钮删除内容,但是如果按下相同的按钮(或其他不打算删除但添加的按钮),我不知道如何删除内容。
示例代码: HTML:

<button class="ShowCam"></button>
<button class="camClose"></button>
<button class="anotherButton"></button>

JS:

var camContent = Backbone.View.extend({
        el: "body",     
    events: {
        "click .ShowCam": "addContentCam", 
                "click .anotherButton": "otherAddContentFunction"                   
    },          
    initialize: function() {
        _.bindAll(this);
        this.model = new ContentCollection();
        this.model.on("add", this.contentAdded);
        this.model.on("remove", this.removeContentCam); 
    },                  
    addContentCam: function(event) {
        this.model.add({ modelName: "IPcam"});          
    contentAdded: function(content) {
        if (content.view == null) {
           var templ_name = 'cam';                                                  
           content.view = new ContentView({
                  model: content,
                  template: $.trim($("[data-template='"+ templ_name +"'] div").html() || "Template not found!")});
           $("div.camBox").empty(); 
           this.$el.find(".content").find("div.camBox").append(content.view.render().el);                                           
        }                   
    },  
    removeContentCam: function(content) {
        if (content.view != null) { 
            content.view.remove();              
        }
        content.clear();  //Clear the properties of the model   
    }   
}); 
var ContentView = Backbone.View.extend({
    tagName: "div",
    template: null,
    events: {
          "click .camClose": "removeView" 
    },
    initialize: function() {
        _.bindAll(this);
        this.template = this.options.template; 
    },
    render: function() {        
        this.$el.html(Mustache.render(this.template, this.model.toJSON())); 
        return this; 
    },
    removeView: function() {
        this.model.collection.remove(this.model); //Remove the model of the collection
    }
});

1 个答案:

答案 0 :(得分:1)

Javascript使用垃圾收集系统来进行内存管理。这意味着您只需删除对它的所有引用即可删除任何(从技术上讲,它实际上不会被删除,直到垃圾收集器到达它,但实质上它已被删除)。

因此,如果您想确保删除模型,则无需调用任何特殊方法,只需在每个视图(或代码中的其他位置)上执行delete someView.model即可引用该模型。

如果您查看remove上的Backbone.View方法,您实际上可以在实践中看到这一切。你会发现所有它真正做的(除了触发事件)都是调用内部方法_removeReference_removeReference做了什么?这样:

  if (this == model.collection) {
    delete model.collection;
  }
  // (there's also an event-related line here)

现在,所有这一切,如果你正在制作一个新视图来替换旧视图,并且它们都具有相同的模型......那么你可能不应该首先创建一个新的视图。处理这种情况的更标准的Backbone方法是在视图上重新调用render(而不是创建一个新的)。