模塊化JS組件授權模式

我正在研究將大型UI組件分解爲更小的部分，但有一點我不完全確定如何處理，而我似乎無法找到一般信息的東西是從子組件中委派事件。例如，如果您有待辦事項列表並單擊待辦事項列表，則會更新側邊欄並提供有關待辦事項的詳細信息。現在我們所擁有的代碼基本上是一個帶有模板的文件，並且可以處理所有事件。當您單擊附加到列表和邊欄的包裝的委託處理程序時，它會在DOM節點中搜索數據。有數千個可點擊的行。模塊化JS組件授權模式

我想要的東西而不是沿着這樣的線（這僅僅是僞代碼）：

app.controllers.todos = library.controller.extend({ 
    init: function() { 
    // Store all the todo items in an array 
    this.todoItems = []; 
    todoItemsReturnedFromServer.forEach(function (data) { 
     var todoItem = new app.todo.item(data); 
     todoItems.push(todoItem); 
    }); 
    this.todoList = new app.todo.list({data: this.todoItems}); // start with initial data 
    this.sidebar = new app.sidebar(); 
    }, 
    render: function() { 
    $('#wrapper').append(this.todoList.render()); 
    $('#sidebar').append(this.sidebar.render()); 
    } 
});

所以，你有一個todolist的組件，你可以添加/刪除從和你可以把事件連接起來，它可以更新DOM，但是與數據分離（即你不能有任何DOM，它會工作）。現在，在我們的應用程序中，如果您點擊todoItem，todoItem需要將其事件委託給todoList或更高版本。我不希望每個todoItem都有一個點擊事件。

我唯一的想法是在父組件獲取（如果支持）並從中創建事件的子組件上具有「委託」屬性。它會有事件和處理程序的散列。如果事件處理程序已經連接，它會忽略它。

這種類型的東西是否還有其他示例或模式？

來源

2013-10-12 Oscar Godson

可以監視列表的點擊，並抓住從的listItem（event.target）的ID或其他標識符。這樣，你不需要綁定項目上的任何事件，只需注入由模板和數據製作的html。 – dandavis

@dandavis事情是，我想保留LisItem事件的一部分，因爲它們的語義是theyre listItem事件。授權是一個實現細節。如果我在itemList中設置所有處理程序，那麼即使將它作爲另一個組件，也沒有什麼收穫。如果我誤解了你能給我一個例子嗎？ –

您可以將事件與listItems捆綁在一起。關鍵是使用所有項目的一種方法，從列表或DOM中注入/獲取它們可能需要的任何依賴項。這可以是添加到每個元素上的非事件js屬性，或者只是使用HTML標記來將項目標識到項目的方法。所以，它可能是像itemList.onclick = Items.doItemAction（e.target.itemID，this）的東西...在這種情況下，是的，你有列表上的AN事件，但行動是所有在其他地方定義的項目方法，可能在物品製造商旁邊。 – dandavis

您是否嘗試過使用客戶端MVC框架？創建這些是爲了解決這些問題。我建議從backbone.js開始。

Here是一本很好的入門書。它涉及嵌套視圖和模型，也： http://addyosmani.github.io/backbone-fundamentals/#working-with-nested-views http://addyosmani.github.io/backbone-fundamentals/#managing-models-in-nested-views http://addyosmani.github.io/backbone-fundamentals/#working-with-nested-models-or-collections

來源

2013-10-12 01:19:43 kol

主幹沒有子視圖或子組件的概念。如果是這樣，你能指出在代碼中處理的位置嗎？和Backbone一樣好（我喜歡它），我正在使用已經使用多年並且在Backbone存在之前的自制MVC客戶端。它可以正常工作，對於諸如只是委託事件的事情，我不想爲這個特定問題重寫10幾千行的代碼:)我只是在這個時候尋找模式。 –

在我提到的書中，有處理子視圖的「骨幹設計模式」（嵌套視圖;請參閱上面的鏈接）。這個例子也可能會給你一些想法：http：// todomvc。com/architecture-examples/backbone/ – kol

您提供的todomvc鏈接不會執行它看起來像的委派事件。它只是在所有'.toggle'元素上設置一個點擊事件。我會讀一些你發佈的骨幹鏈接。 –

模塊化JS組件授權模式

回答

相關問題