Question

我有一个骨干视图 - 当被调用时会显示一个表单

$('#add-offer').click(function() {
    console.log("Here");
    formView = new TB_BB.RequestFormView({model : new TB_BB.Request(), el : '#main-container'});
    formView.render();
});

视图看起来像

TB_BB.RequestFormView = Backbone.View.extend({
    initialize : function(){
        this.template = $("#formTemplate"); 
        _.bindAll(this,"render");
    },
    events : {
        "submit #request-form" : "save",
    },
    render : function() {       
        $('#add-offer-button').hide();
        $(self.el).show();      
        var content = this.template.tmpl();
        $(this.el).html(content);
        return this;
    },
    save : function(event){
        console.log("Saved ");      
        event.preventDefault();
    }
});

我每次都发现了提交＃request-form

事件被触发，它被触发到该视图的每个实例 - 但我认为它将超出范围。

例如，如果我在documentload上调用

$(function(){
    //create the router...  
    TB_BB.r = new TB_BB.Requests(TB_BB.initialData.requests);
    app = new TB_BB.Router();   
    Backbone.history.start();
    formView2 = new TB_BB.RequestFormView({model : new TB_BB.Request(), el : '#main-container'});
    formView3 = new TB_BB.RequestFormView({model : new TB_BB.Request(), el : '#main-container'});
    formView2.render();
});

然后我点击表单的提交，我在控制台中看到'已保存'3次而不是一次？应该发生什么？我可以只有一个视图实例吗？

任何帮助表示赞赏

Answer 1

您可以拥有多个视图实例，只要他们使用不同的dom元素，它们将属于一个单独的范围。

另一方面，你通过el参数将dom元素传递给视图，因此你明确告诉你的2或3个视图他们需要管理相同的元素。因此它们都会触发你的提交按钮。

$(function(){
    //create the router...  
    ...

    // here you pass #main-container as the element for the view, 
    // so both these two views, will be handeling the same element. 
    // So, if some event is triggered within that scope, like a click on 
    // a submit button inside this scope, both the views will get the event triggered.
    formView2 = new TB_BB.RequestFormView({model : new TB_BB.Request(), el : '#main-container' });
    formView3 = new TB_BB.RequestFormView({model : new TB_BB.Request(), el : '#main-container' });

    ...
});

您可以拥有多个视图实例，单独工作，您可以在主干documentation's example section

上查看相关示例

其中一个最着名的例子是TODO应用程序（source），其中所有待办事项都是同一个todoView的实例，每个todoView都在自己的范围内管理点击事件。

视图的多个实例

1 个答案: