如何在backbone.js中处理视图之外对象的事件？

Question

如在 backbone-todolist 示例中，我有一个元素的集合。 我创建了两个视图，一个用于列表，另一个用于每个元素。 它很好地工作着。

但是，由于我需要修改列表中的元素，在元素的视图中，我处理修改事件，并打开一个 colorbox 插件 弹出窗口，其包含一个 HTML 表单。HTML 是动态创建的并传递给 colorbox 元素。

我使用 colorbox 和 backbone-form 附加插件。

现在：弹出窗口不是我的视图中的子元素（在 DOM 中），因此我不知道如何在“提交”按钮操作上触发事件。

这是代码片段（省略了无用部分）：

// ** view of the single collection element
window.listElement = Backbone.View.extend({
    tagName: 'li',

    [...]

    updateElement:function(){
        //creates the update form in a popup menu
        var form=new Backbone.Form({BLA BLA BLA...I TESTED IT, IT WORKS.
            }).render();
        $(form.el).append('<input id="update-btn" type="button" name="updateBtn" value="Update" style="display: block;">');
        self=this;

        //HERE COME THE TROUBLES
        $.colorbox({
            html:form.el,
            [...] /SOME OTHER PARAMS
            }).delegate('#update-btn','click',self.saveEl());
        },
    saveEl:function(){
        console.log("now saving..")},       
        },

当弹出窗口打开时，saveEl方法（或函数？哪个术语更正确？）被触发。

我也尝试了代码的不同版本：

    initialize: function(){//added this in the initialize function
        _.bindAll(this, "saveEl");
        $('#update-btn').bind('click', this.saveEl());
          },
    updateElement:function(){
        //LIKE BEFORE BUT WITHOUT DELEGATE FUNCTION
        $.colorbox({
            html:form.el,
            [...] /SOME OTHER PARAMS
            });
        },
        saveEl:function(){
           console.log("now saving..")},        
        },

在第二种情况下，当视图被创建时调用saveEl函数（因此对于列表中的每个元素调用一次）。

我知道我可以为弹出窗口制作一个视图，但是有些东西告诉我它太复杂了，应该有更简单的架构。

问题实际上更普遍：是否可能处理由DOM对象触发的事件，而不在$(this.el)范围之外创建视图？

提前致谢。

-----------------更新：--------------

工作代码的最终版本如下：

// ** view of the single collection element
window.listElement = Backbone.View.extend({
    tagName: 'li',

    [...]

    updateElement:function(){
        //creates the update form in a popup menu
        var form=new Backbone.Form({BLA BLA BLA...I TESTED IT, IT WORKS.
            }).render();
        $(form.el).append('<input id="update-btn" type="button" name="updateBtn" value="Update" style="display: block;">');
        $(form.el).delegate('#update-btn','click',this.saveEl())
        $.colorbox({
            html:form.el,
            [...] /SOME OTHER PARAMS
            });
        },
    saveEl:function(){
        console.log("now saving..")},       
        }
     });

- Daniele B

---

调试后的第一个注释： 将 $('#update-btn').bind('click', this.saveEl()); 更改为 $('#update-btn').bind('click', this.saveEl);（this.saveEl 后面没有括号）可以消除每个视图调用函数一次的问题... - Daniele B

Answer 1

编辑：

$.colorbox没有返回正确的HTML以进行绑定。

正如您所看到的，您将form.el提供给了colorbox，因此您可以直接绑定form.el：

$(form.el).on('click', '#update-btn', self.saveEl);
// here your colorbox code
$.colorbox({
    html: form.el,
    // [...] SOME OTHER PARAMS
});

现在应该使用on，因为delegate是一种旧方法：http://api.jquery.com/on/

----------------------

是的，您可以处理视图范围之外的DOM对象触发的事件，只需要使用$('#your-element')而不是this.$('#your-element')。

对于您的代码，直接触发saveEl是正常的，因为您将该函数的结果提供给了delegate，您需要像这样提供函数的指针：

$.colorbox({
    html: form.el,
    // [...] SOME OTHER PARAMS
}).delegate('#update-btn', 'click', self.saveEl); // without ()

- Atinux

---

感谢您的回答，我已经接触JavaScript有几个月了，所以我需要回顾我在不同语言编程时学到的许多东西（如指针和函数）。 然而，它仍然无法正常工作。我按照您建议的使用了委托，但没有任何反应，我不知道为什么。也许将其附加到colorbox代码之后不是最好的解决方案？ 还有：从您的答案中我理解在initialize函数中放置$('#update-btn').bind('click', this.saveEl) 会限制绑定在视图内的范围。对吗？ - Daniele B

这是程序相关内容的翻译：相反的是，使用 $('#update-btn').bind('click', this.saveEl)，你不会限制你的范围。委托方法不起作用，因为 $.colorbox 没有返回正确的元素来绑定...我将编辑我的答案，给你正确的方法，我刚刚找到了解决方案。 - Atinux

再次感谢。我尝试将 $('#updatebtn').bind('click',this.saveRI); 放在视图的初始化中，但它不起作用：也许是因为绑定时 $('#updatebtn') 元素还不存在？目前我找到的唯一解决方法是扩展 Backbone.Form 视图添加 events:{"click #updatebtn":"functionToBeTriggered"} ... 这意味着创建一个视图（这不是我想使用的解决方案）... 无论如何，我会等待您的代码。谢谢并再见。Au revoir :-) - Daniele B

亲爱的Atinux，我终于做到了！只需在表单创建后添加以下代码即可：$(form.el).delegate('#updatebtn','click', this.saveEl);非常感谢您的帮助，如果没有您的帮助，我可能会在这个简单的问题上卡很长时间。 - Daniele B

非常乐意！我编辑了原帖并解释了您需要使用on方法而不是delegate（旧方法）。 - Atinux

是的，我看到了。谢谢，真的非常清晰易懂和有用。 由于我使用的是jquery<1.7，所以我使用了delegate函数（而不是'on'函数）。 我在我的帖子的编辑部分中放置了最终版本的可工作代码，供有兴趣的用户参考。 再见。 - Daniele B