javascript - Backbone.js 将模型添加到集合问题

Question

我正在 Backbone.js 中构建一个测试应用程序(我的第一个使用 Backbone 的应用程序)。该应用程序如下所示:

1. 从服务器“计划”加载数据
2. 建立计划 list 并展示给屏幕
3. 有一个添加新计划的按钮
4. 添加新计划后，添加到集合(目前不保存到服务器)
5. 重定向到索引页面并显示新集合(包括您刚刚添加的计划)

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

如何防止这种情况发生？我找到了一种方法来做到这一点，但这绝对不是正确的方法。您将在下面找到我的代码示例。谢谢您的帮助。

PlansListView View :

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

新建PlanView保存方法

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 );

        }
    },

新计划路线:

    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 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 );

Answer 1

您是否在每次访问索引页面时都获取数据，因为您希望列表与数据库同步(即其他人添加了一个项目并且您希望它反射(reflect)出来)？

如果不是这种情况，我觉得你所做的很好；您仅在数据不存在时才进行提取。

但是，如果您确实希望列表同步；但是您仍然希望在其中呈现新添加的项目；您可以从获取的列表中合并，也可以使用另一个列表来保存新添加的数据。

如果你使用另一个列表，你只需要渲染两个列表；未保存的列表可能应该存在于持久列表的顶部或底部，并组合在一起。