javascript - 如何在 backbone.js 中处理 View 之外的对象事件？

Question

在 backbone-todolist 示例中，我有一个元素集合。我制作了 2 个 View ，一个用于列表，一个用于每个元素。效果很好。

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

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

现在:弹出窗口不是我 View 的子项(在 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..")},        
        },

在第二种情况下，创建 View 时调用 saveEl 函数(因此为列表的每个元素调用一次)。

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

这个问题确实更普遍:是否可以处理由 $(this.el) 范围之外的 DOM 对象触发的事件而不为它们创建 View ？

提前致谢。

----------------更新:------------

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

// ** 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..")},       
        }
     });

Answer 1

编辑:

$.colorbox 没有发回正确的 html 来绑定(bind)它。

可以看到，你给colorboxform.el，所以可以直接绑定(bind)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/

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

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

对于你的代码，直接触发saveEl是正常的，因为你把那个函数的结果给了delegate，你需要像这样给出函数的指针:

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