流星js - 如何鉤入遞歸模板的「呈現」事件？

我有在那裏我渲染把手部分遞歸根據MongoDB的樹狀結構，像這樣的情況：流星js - 如何鉤入遞歸模板的「呈現」事件？

<template name='menu'> 
    <ul class='menu'> 
    {{#each topLevelChildren}} 
     {{>menu-item}} 
    {{/each}} 
    </ul> 
</template> 

<template name='menu-item'> 
    <li>{{name}} 
    {{#if listChildren.count}} 
    <ul> 
     {{#each listChildren}} 
      {{>menu-item}} 
     {{/each}} 
    </ul> 
    {{/if}} 
    </li> 
</template>

在MongoDB的文檔是這樣的：

{ _id : ObjectId("525eb7245359090f41b65106"), 
    name : 'Foo', 
    children : [ ObjectId("525eb60c5359090f41b65104"), ObjectId("525eb6ca5359090f41b65105") ] 
}

而listChildren只是返回一個遊標，其中包含父級的子數組中的每個元素的完整文檔。

我想做一點jQuery的妝所再現的樹，但我似乎無法掛接到整個樹中的「渲染」事件，像

Template.menu-completed.rendered = function(){ 
    // console.log('done!'); 
}

嘗試這個

Template.menu.rendered = function(){ 
    console.log($('menu li')); 
}

這不僅不會返回正確的結果（括號中包含逗號），它還凍結了網絡檢查器（但不是應用程序...）。任何幫助將不勝感激！

來源

2014-01-23 Petrov

什麼樣的妝，你正在試圖做的？在大多數情況下，您可以通過1）分別對每個模板應用jQuery改進，或2）合併模板來避免此問題。 –

我需要在完全呈現的模板中找到一個特定的錨標記並向其中添加一個類...然後向其父項中的每個父類添加一個類 – Petrov

您是否嘗試使用自定義的handlebars幫助程序執行一些JQuery項目是否正確（主持人）？看看這個隕石https://github.com/raix/Meteor-handlebar-helpers – nico

這是一個有趣的問題:)

流星（0.7.x）的最新版本，當模板第一次呈現在rendered回調被調用一次，然後再一次的任何部分在模板中是重渲染的。（當Meteor 0.8 - shark分支或「流星UI」登陸時，這種行爲會發生變化。）

我從來沒有試過用遞歸方式做事，但是很難判斷你得到的回調是實際的父母。你可能想要嘗試的一件事是在名爲menu-parent的模板中開始遞歸渲染。這樣，當第一次調用rendered回調（並且只要您的數據已加載），就會知道整個樹會被渲染。

但是，我懷疑可能有更好的方法來做到這一點。一般來說，你不應該使用jQuery來修改DOM元素的類和屬性，因爲你會誤解Meteor在做什麼以及jQuery在做什麼。你能否詳細說明你試圖通過以下方式實現的目標，並且我會更新我的答案？

我需要找到完全呈現模板中的特定錨標記，並添加一個類來它...然後添加一個類各其父

來源

2014-01-30 16:55:45

感謝一個可愛的回覆安德魯！我需要做的是構建一個樹形菜單，其外觀適應當前的URL。例如，如果網址是「紐約城」，那麼我需要找到錨標籤'new_york_city'，然後向其父母的每個父級添加一個類：'new_york'，'usa'，'north_america' （例如）。我使用的數據實際上是動態的，所以我不能只呈現整個事物的靜態嵌套無序列表 – Petrov

我一直在看着鯊魚分支，似乎我將能夠改變類，渲染任何東西，這隻會讓我的問題消失... – Petrov

在這種情況下，請嘗試'流星 - 釋放模板引擎預覽10.1「其中'模板引擎預覽10.1」是最新的模板引擎（鯊魚）釋放在https://github.com/meteor/meteor/releases發現，看看你能否讓這些課程以這種方式工作。 –

彼得羅夫的，你的代碼實際工作對我來說，只需對jquery部分進行一些小修改即可。但也許我是誤解。這是我做的：

創建一個全新的項目。
添加與小的改動的。html的模板：<li><span class="name">{{name}}</span>
創建一個新的集合列表。
Template.menu.topLevelChildren = function() { return List.find(); };

然後我說這個處理程序：

Template.menu.rendered = function(e){ 
    $('.name').each(function(i, e) { 
     console.log(e); 
    }); 
}

現在，當渲染，例如，當新的數據插入到List收集，我得到一個打印這樣的控制檯上：

<span class="name">second</span> 
<span class="name">second2</span> 
<span class="name">second21</span> 
<span class="name">second22</span> 
<span class="name">third</span> 
<span class="name">third2</span> 
<span class="name">third21</span> 
<span class="name">third22</span> 
<span class="name">third</span> 
<span class="name">third2</span> 
<span class="name">third21</span> 
<span class="name">third22</span>

這只是我添加的樹元素的平面列表（其中second2嵌套在second中，而second2x嵌套在second2等中）。所以根據我的理解，你可以從jquery中選擇回來，找到你正在尋找的標籤並按照你的意願改變它的類。如果我誤解了某些內容，請讓我知道。

下面的完整代碼。

的test.html：

<head> 
    <title>test</title> 
</head> 

<body> 
    {{> menu }} 
</body> 

<template name='menu'> 
    <ul class='menu'> 
    {{#each topLevelChildren}} 
     {{>menu-item}} 
    {{/each}} 
    </ul> 
</template> 

<template name='menu-item'> 
    <li><span class="name">{{name}}</span> 
    <ul> 
    {{#each children}} 
    {{>menu-item}} 
    {{/each}} 
    </ul> 
    </li> 
</template>

test.js：

List = new Meteor.Collection("List"); 

if (Meteor.isClient) { 
    Template.menu.topLevelChildren = function() { 
     return List.find(); 
    }; 

    Template.menu.rendered = function(e){ 
     $('.name').each(function(i, e) { 
      console.log(e); 
     }); 
    } 
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
}

來源

2014-02-02 01:19:06

@Petrov：這是否回答你的問題？還是你也想知道jQuery的一部分？ –

@Petrov：你有一個賞金，向人們建議你真的在這裏得到一些幫助。如果您至少讓我們知道您最終如何解決問題以及爲什麼沒有建議的解決方案爲您工作，我將不勝感激。 –

流星js - 如何鉤入遞歸模板的「呈現」事件？

回答

相關問題