BackboneJS:如何在单个视图中分配多个模型

时间:2013-03-06 03:08:31

标签: javascript backbone.js backbone-views backbone-collections backbone-model

如何在单个视图中调用多个模型

通常情况下,您创建了一个骨干模型

var myModel = Backbone.Model.extend({ url:"api/authentication"});

然后将其分配给视图,使其成为某个视图的默认模型

    var LoginView = Backbone.View.extend({
        model: new myModel(),
        initialize: function(){
            _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
            this.model.bind('reset', this.render); 
            this.model.bind('change', this.render); 
            this.model.bind('add', this.render_thread_summary); 
        },
        ...
    });

但是我在一个视图中有很多方法可以调用不同的模型。目前我只是在事件方法中创建一个模型实例。

我想的另一种解决方案就是这样

initialize: function(){
   _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
   new.model1().bind('reset', this.render); 
   new.model2().bind('change', this.render); 
   new.model3().bind('add', this.render_thread_summary); 
},

但这些良好做法是什么?还有什么其他方法可以做到这一点。感谢。

更新 回应彼得,这是我的实际代码

var userRegModel                = Backbone.Model.extend({url: fn_helper.restDomain()+'user/reg'});
var userResendActivationModel   = Backbone.Model.extend({url: fn_helper.restDomain()+'user/token/activation/new'});
var userResetPassModel1         = Backbone.Model.extend({url: fn_helper.restDomain()+'user/pwdreset/token/new'});
var userResetPassModel2         = Backbone.Model.extend({url: fn_helper.restDomain()+'user/pwdreset/change'});
var userLoginModel              = Backbone.Model.extend({url: fn_helper.restDomain()+'user/login'});

_view:  Backbone.View.extend({
                el:             'div#main-container',
                initialize:     function(){},
                events: {
                    'click #user-signup':            'signupUserFn', //userRegModel 
                    'click a#activation-resend':     'resendActivationFn',//userResendActivationModel
                    'click #reset-password-submit1': 'execResetPasswordFn', //userResetPassModel1
                    'click #reset-password-submit2': 'execResetPasswordFn', //userResetPassModel2

上面声明的每个模型对应于事件

中声明的不同方法

1 个答案:

答案 0 :(得分:3)

  • 通常,模型实例应该传递给options方法的initialize参数中的视图。

通常,模型表示当前或最终将数据存储在某个地方的数据。现在,有时您想创建一个仅用于管理短暂浏览器状态的模型,这很好,但常见的情况是大多数读/编辑/删除视图不会创建模型,除非这是他们的主要目的,如“发表新评论”形成。因此,通常如果您的视图必须显示某些模型,允许它们更新并保存,它们应该进入options函数的initialize参数中的视图。

但是,如果您的视图确实需要这么多模型而您的系统中没有任何其他内容关注它们,只需在initialize期间创建它们并将它们直接存储为this(您的视图实例)上的属性,你离开了。

如果你发布了一个更完整的代码示例,我们可以给出具体的建议,但是如果你有一个LoginView并且你需要多于一个模型,那么你可能会在杂草设计明智。

Part Deux

好的,所以看起来您认为每个API端点都需要一个模型。只需将这些方法实现为使用Backbone.sync并使用相应url选项的单个模型类的方法。

var Model = Backbone.Model.extend({
    resendActivation: function () {
        return Backbone.sync.call('update', this, {url: fn_helper.restDomain()+ 'user/token/activation/new'});
    }
});

您可能需要手动触发事件,我不确定您的API返回的内容,但从根本上说这些都是处理单个用户记录并且可以由单个模型处理。

其他不相关的提示:

  • _.bindAll(this); //不要打扰列出方法
  • this.model.on('reset change', this.render); //一次绑定多个事件
  • JavaScript绝大多数惯例使用camelCase而不是lower_with_underscores