4

バックボーン-todolistの例のように、私は要素のコレクションを持っています。リスト用と各要素用の2つのビューを作成しました。それは素晴らしい働きをします。

ただし、リストの要素を変更する必要があるため、要素のビューで、htmlフォームを含むカラーボックスプラグインを使用してポップアップを開くmodifyイベントを処理します。htmlは動的に作成され、colorbox要素に渡されます。

カラーボックスとバックボーン形式の追加プラグインを使用します。

現在：ポップアップは私のビューの（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..")},        
        },

この2番目のケースでは、ビューの作成時にsaveEl関数が呼び出されます（したがって、リストの要素ごとに1回）。

私はポップアップのビューを作成することを知っていますが、somEthingは、それが複雑すぎるので、もっと単純なアーキテクチャが必要だと言っています。

実際、質問はより一般的です。$（this.el）のスコープ外で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;">');
        $(form.el).delegate('#update-btn','click',this.saveEl())
        $.colorbox({
            html:form.el,
            [...] /SOME OTHER PARAMS
            });
        },
    saveEl:function(){
        console.log("now saving..")},       
        }
     });
4

1 に答える 1

3

編集：

$ .colorboxは、バインドするための適切なhtmlを送り返しません。

ご覧のとおり、colorboxform.elに渡すので、直接バインドできますform.el。

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

は古い方法であるonため、今すぐ使用する必要があります：http: //api.jquery.com/on/delegate

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

はい、ビューのスコープ外でDOMオブジェクトによって発生したイベントを処理できます。$('#your-element')代わりに使用する必要がありますthis.$('#your-element')。

saveElコードの場合、その関数の結果を指定するため、直接トリガーするのが通常です。次delegateのように関数のポインターを指定する必要があります。

$.colorbox({
    html: form.el,
    // [...] SOME OTHER PARAMS
}).delegate('#update-btn', 'click', self.saveEl); // without ()
于 2012-01-19T14:32:44.217 に答える