從流星中的對象數組中獲取給定鍵的值

Question

這個流星代碼有menuItems來填充模板中的li。當一個項目被點擊時，我需要從被點擊的對象中獲取「登錄」鍵的值。
我無法使用menuItems.find();，因爲它不是mongo集合。
我無法創建json對象JSON.parse(menuItem)，因爲menuItem在控制檯中未定義。
我想不出什麼谷歌。

感謝

Template.mainMenu.helpers({ 
    menuItems: [ 
    {menuItem: "task1", login: false}, 
    {menuItem: "task2", login: true}, 
    {menuItem: "task3", login: true}, 
    {menuItem: "task4", login: true}, 
    {menuItem: "task5", login: true}, 
    {menuItem: "task6", login: true}, 
    {menuItem: "task7", login: false}, 
    {menuItem: "task8", login: false}, 
    {menuItem: "task9", login: false} 
    ] 
}); 

Template.mainMenu.events({ 
    'click .menuItem': function (event) { 
    var item = $(event.currentTarget).data('value'); 

    var isLogin = what is the value of login for this "item" 
    } 
}); 

Answer 1

這是如此基本，你應該已經看到了前100行文檔的答案。不過，讓我稍微解釋一下。

您正在使用幫手將數據放入li元素中。這個助手返回對象的數組，這樣你就可以在你的模板中使用它作爲一個迭代，即使用each塊：

{{#each menuItems}} 
    <li class="menuItem">{{menuItem}} {{login}}</li> 
{{/each}} 

類似的東西。

然後，您有一個事件處理程序，它監聽每個具有menuItem類的元素上的每個點擊事件。把它看成是jQuery的事件處理程序，所以，在jQuery中，你將它寫在這樣一種方式：

$('.menuItem').each(function() {...}); 

在你進入each方法的功能，可以通過this關鍵字訪問迭代器的元素。因此，例如，您想訪問任何iterable項目的login屬性。你可以這樣做

$('.menuItem').each(function() { 
    console.log(this.login); 
}); 

讓我們回到流星。在事件處理程序中，可以使用相同的方法來訪問對象的任何屬性。當用戶點擊時，this將引用該元素。所以，答案是

Template.mainMenu.events({ 
    'click .menuItem': function() { 
    const item = this; 

    // do whatever you need with this object 
    } 
}); 

模板事件處理函數有兩個參數，一個事件，一個用於模板。您可能需要它們，但在這種特殊情況下，兩者都是不必要的，因此沒有提供給作爲click事件處理程序指定的函數的參數。

---

只要記住，在模板each塊創建一個新的嵌套的背景下，並在這方面，this是指任何的each塊迭代的項目。這就是爲什麼你可以通過助手指的是你的JSON每個對象的屬性：

{{#each menuItems}} 
    <li class="menuItem">{{menuItem}} {{login}}</li> 
{{/each}} 

你可以看到，你不必menuItem或login幫手，但無論如何他們的工作。實際上，這是一種簡短的形式

{{#each menuItems}} 
    <li class="menuItem">{{this.menuItem}} {{this.login}}</li> 
{{/each}}