如何將事件添加到JavaScript運行時創建的HTML小部件

Question

我正在開發一個網絡社區CakePHP並開始懷疑使用jQuery在需要時提供有用的窗口小部件。

例如，我寫了一個jQuery插件，它搜索特定輸入文本中的數據，詢問我的數據庫，並獲取事件處理的結果。

該插件基本上適用於簡單的應用程序，但對於幾乎在所有視圖中使用該插件的社區而言基本沒有用處，並且每次都使用不同的事件和方法處理它，使其具有巨大的事件聲明並且非常煩人調試。

我thougt使用違約事件從窗口小部件來解決問題，並添加特定的視圖可能性設置其他事件，但我怎麼能做到這一點？

這是我想

圖像的綠色區域的情況是在哪裏我不知道，我應該把違約事件被retrived每次我需要他們的時間？在知道之後，在視圖中，我可以將一些事件添加到小部件中以更易於使用。

對於小部件，我打算每一種HTML部分通過JavaScript加載，並且是交互式的，也許是一個輸入搜索，它檢索結果列表或類似的東西。

我的問題是如何在運行時將默認事件設置爲小部件，而無需每次都進行復制和粘貼？ 而我的第二個問題是，我怎樣才能爲視圖添加特定事件？

某些在線教程也很好。

Answer 1

我的回答需要backbone.js，所以我不確定這是否會對您有所幫助。

你可以將你的小部件分成一個包裝和真正的小部件。 包裝器能夠處理的事件，如你的親密事件：

var WidgetWrapper = Backbone.View.extend({ 

    tagName: 'div', 
    // This should be a mustache template: 
    template: '<a class="close" href="#">close</a><div class="content"></div>', 
    events: { 
    '.close click': 'close', 
    '.open click' : 'open' 
    }, 
    close: { 
    this.$el.hide(); 
    }, 
    open: { 
    alert('I am open'); 
    } 
    render: { 
    this.$el.html(Mustache.to_html(view.template, view.model.toJSON()); 
    } 

}); 

真正的小部件可能使自身的包裝部件內，這兩種觀點可以用數據模型（this.model）進行交互。

var SpecialWidget = Backbone.View.extend({ 

    tagName: 'div', 

    // This should also be a mustache template: 
    template: '<input> <a href="#" clas="open">open</a>', 

    events: { 
    'input change': 'edit' 
    }, 

    render: function() { 
    if(!this.wrapper) { 
     this.wrapper = new WidgetWrapper(); 
    } 

    // Hand over the model to the wrapper 
    this.wrapper = this.model; 
    // Render the wrapper 
    this.wrapper.render(); 

    // Insert the widget content inside the wrapper 
    this.$el.empty().append(this.wrapper.$el); 
    this.$(".content").html(Mustache.to_html(view.template, view.model.toJSON()); 
    }, 

    edit: function() { 
    alert("Changed"); 
    }, 
}); 

這將允許你分開你的事件。

你也可以用另一種方法做它，並使用一個包裝子視圖。