Question

我正在开发一个backbone.js项目，主要是学习骨干框架本身。

但是我遇到了这个我无法弄清楚的问题，但可能对这个问题有所了解......

我的创建视图看起来像这样......

define(['backbone', 'underscore', 'jade!templates/addAccount', 'models/accountmodel', 'common/serializeObject'], 
function(Backbone, underscore, template, AccountModel, SerializeObject){
return Backbone.View.extend({
    //Templates
    template: template,
    //Constructor
    initialize: function(){
        this.accCollection = this.options.accCollection; 
    },
    //Events
    events: {
        'submit .add-account-form': 'saveAccount'
    },
    //Event functions
    saveAccount: function(ev){
        ev.preventDefault();
        //Using common/serializeObject function to get a JSON data object from form
        var myObj = $(ev.currentTarget).serializeObject();
        console.log("Saving!");
        this.accCollection.create(new AccountModel(myObj), {
            success: function(){
                myObj = null;
                this.close();
                Backbone.history.navigate('accounts', {trigger:true});
            },
            error: function(){
                //show 500?
            }
        });
    },
    //Display functions
    render: function(){
        $('.currentPage').html("<h3>Accounts <span class='glyphicon glyphicon-chevron-right'> </span> New Account</h3>");
        //Render it in jade template  
        this.$el.html(this.template());

        return this;
    }
});

});

问题在于，我每次访问创建页面并转到另一个页面并再次访问它。它似乎记得它。当我最终创建一个新帐户时，我多次访问帐户总数... 所以console.log（“Saving！”）;在saveAccount函数中调用x次访问页面... 离开时我是否必须关闭/删除当前视图或这是什么？

修改的这是我开始观看的路线的一部分..

"account/new" : function(){
                var accCollection = new AccountCollection();
                this.nav(new CreateAccountView({el:'.content', accCollection:accCollection}));
                console.log("new account");
           },

/问候

Answer 1

你有僵尸的观点。每次这样做：

new CreateAccountView({el:'.content', accCollection:accCollection})

你正在向.content附加一个事件监听器，但似乎没有任何东西正在分离它。通常的方法是在视图上调用remove以将其从DOM中删除并告诉它自己清理。默认remove执行您不希望它执行的操作：

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
}

您不希望this.$el.remove()调用，因为您的视图不负责创建自己的el，您可能需要：

remove: function() {
  this.$el.empty();        // Remove the content we added.
  this.undelegateEvents(); // Unbind your event handler.
  this.stopListening();
  return this;
}

然后你的路由器可以跟踪当前打开的视图和remove它之前再抛出另一个这样的东西：

if(this.currentView)
    this.currentView.remove();
this.currentView = new CreateAccountView({ ... });
this.nav(this.currentView);

当我在这里时，您的代码将在您升级Backbone后立即中断。截至version 1.1：

Backbone Views不再自动将传递给构造函数的选项附加为this.options，但如果您愿意，可以自己执行。

所以你的initialize：

initialize: function(){
    this.accCollection = this.options.accCollection; 
},

不适用于1.1+。但是，某些选项会自动复制：

构造函数/初始化 new View([options])

有几个特殊选项，如果通过，将直接附加到视图：model，collection，el，id，className ，tagName，attributes和events。

所以你可以抛弃你的initialize，在视图中引用this.collection而不是this.accCollection，并使用以下方法实例化视图：

new CreateAccountView({el: '.content', collection: accCollection})

在View中创建对象时出错

1 个答案: