添加模型到集合问题

我正在构建一个测试应用程序在Backbone.js(我的第一个应用程序使用Backbone)。应用程序是这样的:

1. 从服务器"Plans"加载数据
2. 构建计划列表并显示到屏幕
3. 有一个添加新计划的按钮
4. 一旦新计划被添加，添加到收集(现在不保存到服务器)
5. 重定向到索引页并显示新的集合(包括您刚刚添加的计划)

我的问题是第5项。当我保存一个计划时，我将模型添加到集合中，然后重定向到初始视图。此时，我从服务器获取数据。当我从服务器获取数据时，这将覆盖我的集合，并且我添加的模型将消失。

我怎样才能防止这种情况的发生?我已经找到了一种方法来做到这一点，但这绝对不是正确的方式。下面您将找到我的代码示例。谢谢你的帮助。

PlansListView视图:

var PlansListView = Backbone.View.extend({
    tagName : 'ul',
    initialize : function()
    {
        _.bindAll( this, 'render', 'close' );
        //reset the view if the collection is reset 
        this.collection.bind( 'reset', this.render , this );
    },
    render : function()
    {
        _.each( this.collection.models, function( plan ){
            $( this.el ).append( new PlansListItemView({ model: plan }).render().el );
        }, this );
        return this;
    },
    close : function()
    {
        $( this.el ).unbind();
        $( this.el ).remove();  
    }   
});//end

NewPlanView保存方法

var NewPlanView = Backbone.View.extend({
    tagName : 'section',
    template : _.template( $( '#plan-form-template' ).html() ),
    events : {
        'click button.save' : 'savePlan',
        'click button.cancel' : 'cancel'
    },
    intialize: function()
    {
        _.bindAll( this, 'render', 'save', 'cancel' );  
    },
    render : function()
    {
        $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) );                                    
        return this;
    },
    savePlan : function( event )
    {
        this.model.set({
            name : 'bad plan',
            date : 'friday',
            desc : 'blah',
            id : Math.floor(Math.random()*11),
            total_stops : '2'           
        });
        this.collection.add( this.model );
        app.navigate('', true );
        event.preventDefault();
    },
    cancel : function(){}
});

路由器(默认方法):

    index : function()
    {
        this.container.empty();
        var self = this;
        //This is a hack to get this to work
        //on default page load fetch all plans from the server
        //if the page has loaded ( this.plans is defined) set the updated plans collection to the view
        //There has to be a better way!!
        if( ! this.plans )
        {
            this.plans = new Plans();

            this.plans.fetch({
                success: function()
                {
                    self.plansListView = new PlansListView({ collection : self.plans });
                    $( '#container' ).append( self.plansListView.render().el );
                    if( self.requestedID ) self.planDetails( self.requestedID );
                }   
            });
        }
        else
        {
            this.plansListView = new PlansListView({ collection : this.plans });
            $( '#container' ).append( self.plansListView.render().el );
            if( this.requestedID ) self.planDetails( this.requestedID );
        }
    },

New Plan Route:

    newPlan : function()
    {   var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'});
        this.newPlan = new NewPlanView({ model : plan, collection: this.plans });
        this.newPlan.render();
    }   

完整代码(function($){

var Plan = Backbone.Model.extend({
    defaults: {
        name : '',
        date : '',
        desc : ''   
    }   
});
var Plans = Backbone.Collection.extend({
    model : Plan,
    url : '/data/'  
});     



$( document ).ready(function( e ){
    var PlansListView = Backbone.View.extend({
        tagName : 'ul',
        initialize : function()
        {
            _.bindAll( this, 'render', 'close' );
            //reset the view if the collection is reset 
            this.collection.bind( 'reset', this.render , this );
        },
        render : function()
        {
            _.each( this.collection.models, function( plan ){
                $( this.el ).append( new PlansListItemView({ model: plan }).render().el );
            }, this );
            return this;
        },
        close : function()
        {
            $( this.el ).unbind();
            $( this.el ).remove();  
        }   
    });//end
    var PlansListItemView = Backbone.View.extend({
        tagName : 'li',
        template : _.template( $( '#list-item-template' ).html() ),
        events :{
            'click a' : 'listInfo'  
        },
        render : function()
        {
            $( this.el ).html( this.template( this.model.toJSON() ) );
            return this;            
        },
        listInfo : function( event )
        {

        }
    });//end

    var PlanView = Backbone.View.extend({
        tagName : 'section',
        events : {
            'click button.add-plan' : 'newPlan'
        },
        template: _.template( $( '#plan-template' ).html() ),
        initialize: function()
        {
            _.bindAll( this, 'render', 'close', 'newPlan' );            
        },
        render : function()
        {
            $( '#container' ).append( $( this.el ).html( this.template( this.model.toJSON() ) ) );
            return this;
        },
        newPlan : function( event )
        {
            app.navigate( 'newplan', true );
        },
        close : function()
        {
            $( this.el ).unbind();
            $( this.el ).remove();  
        }   
    });//end

    var NewPlanView = Backbone.View.extend({
        tagName : 'section',
        template : _.template( $( '#plan-form-template' ).html() ),
        events : {
            'click button.save' : 'savePlan',
            'click button.cancel' : 'cancel'
        },
        intialize: function()
        {
            _.bindAll( this, 'render', 'save', 'cancel' );  
        },
        render : function()
        {
            $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) );                                    
            return this;
        },
        savePlan : function( event )
        {
            this.model.set({
                name : 'bad plan',
                date : 'friday',
                desc : 'blah',
                id : Math.floor(Math.random()*11),
                total_stops : '2'           
            });
            this.collection.add( this.model );
            app.navigate('', true );
            event.preventDefault();
        },
        cancel : function(){}
    });

    var AppRouter = Backbone.Router.extend({
        container : $( '#container' ),
        routes : {
            ''              : 'index',
            'viewplan/:id'  : 'planDetails',
            'newplan'           : 'newPlan'
        },
        initialize: function(){
        },
        index : function()
        {
            this.container.empty();
            var self = this;
            //This is a hack to get this to work
            //on default page load fetch all plans from the server
            //if the page has loaded ( this.plans is defined) set the updated plans collection to the view
            //There has to be a better way!!
            if( ! this.plans )
            {
                this.plans = new Plans();

                this.plans.fetch({
                    success: function()
                    {
                        self.plansListView = new PlansListView({ collection : self.plans });
                        $( '#container' ).append( self.plansListView.render().el );
                        if( self.requestedID ) self.planDetails( self.requestedID );
                    }   
                });
            }
            else
            {
                this.plansListView = new PlansListView({ collection : this.plans });
                $( '#container' ).append( self.plansListView.render().el );
                if( this.requestedID ) self.planDetails( this.requestedID );
            }
        },
        planDetails : function( id )
        {
            if( this.plans )
            {
                this.plansListView.close();
                this.plan = this.plans.get( id );
                if( this.planView ) this.planView.close();
                    this.planView = new PlanView({ model : this.plan });
                this.planView.render();
            }
            else{
                this.requestedID = id;
                this.index();
            }
            if( ! this.plans ) this.index();
        },
        newPlan : function()
        {   var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'});
            this.newPlan = new NewPlanView({ model : plan, collection: this.plans });
            this.newPlan.render();
        }   
    });

    var app = new AppRouter();
    Backbone.history.start();
}); 




})( jQuery );

this.plans.fetch({remove: false})