Backbone.js 视图的多个实例

我有一个主干视图，当调用它时，它表示一种形式

$('#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();
    }
});

我发现每次 提交申请表

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

例如，如果我打开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次而不是一次？那会发生吗？我只能有一个视图实例吗

---

任何帮助

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

另一方面，您可以通过参数将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' });

    ...
});

---

您可以拥有一个视图的多个实例，它们分别工作，您可以在主干上看到这些实例

---

最著名的例子之一是TODO应用程序（），其中所有TODO项都是相同todoView的实例，每个TODO项都在各自的范围内管理单击事件。

我看到两个缺陷，1您在选择器中使用了一个ID，但如果您在屏幕上呈现两个视图，则dom中会有两个ID相同的元素，这不好，第二，您的选择器现在正在寻找一个submit按钮，其中包含一个具有ID请求表单的childnode。我认为您必须在submit和#request form之间留出空格，而不应

$（self.el）.show（）render

方法中，code>应该是

$（this.el）.show（）？我看不到任何地方定义了
self
。谢谢-这很有趣，它的作用域是dom，而不是初始化的变量。我已经解决了上面的问题，但发现了一个类似的问题，所以我有一个“请求”列表，然后有一个“发送消息”按钮，我在一个dom选择器中加载的发送表单（#消息内容）。然而，类似地，每次我将新的“消息”加载到选择器后，它都会发送多个请求。因此，如果我想在同一个dom元素中加载消息框，我该如何解决这个问题？todo示例没有问题，因为一旦一个元素被添加到它自己独特的dom中，它就可以直接编辑。事实上，它的作用域是dom元素，这是非常合理的，因为您尝试使用的这些事件都是通过jquery传递的，如下所示：$（'selector'，view-element-context）；因此，如果视图元素相同，那么选择器将导致绑定到相同的元素。关于你的第二个问题，我只需要在这里创建一个关于堆栈溢出的单独Q&a，通过代码，我或其他人可以通过适当的代码示例帮助你，而不是在注释中这样做