Question

正如在骨干 - todolist示例中，我有一组元素。我创建了2个视图，一个用于列表，一个用于每个元素。它很棒。

但是，由于我需要修改列表中的元素，在元素视图中我处理修改事件打开一个带有colorbox plugin的弹出窗口其中包含一个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函数（因此对于列表的每个元素都会调用一次）。

我知道我对弹出窗口有所了解，但somEthing告诉我，它太复杂了，而且我应该有一个更简单的架构。

问题确实更为通用：是否可以处理DOM对象在$（this.el）范围之外触发的事件，而无需为其创建视图？

提前感谢。

----------------- UPDATE：--------------

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

// ** 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来绑定它。

如您所见，您提供给colorbox form.el，因此您可以直接绑定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 ()

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

1 个答案: