流星從集合中添加html元素

我有需要在集合中顯示的數據。我應該遍歷集合並根據集合中的每個元素創建html元素。流星從集合中添加html元素

我想在html代碼中插入看起來像這樣的卡片。

<div class="card #66bb6a green lighten-1"> 
     <div class="card-content white-text"> 
      <span class="card-title">{{ title }}</span> 
      {{#if currentUser}} 
      <p>{{ currentUser }}</p> 
      {{/if}} 
     </div> 
     <div class="card-action"> 
      <a class="card-nav" href="#">Navigation</a> 
      <a class="card-remove" href="#">Remove</a> 
     </div> 
    </div>

請注意，單擊事件應該在一個元素（card-nav，card-remove）上。這樣做的最好方法是什麼？這可以創建一個模板，然後插入基於集合的每個模板？

感謝您的回答！爲了

Template.your_template_name.helpers({ //getting the data from collection and assign it to a helper 
    yourdata: function() { 
    return some_collection.find({}); 
    } 
});

，並在你的火焰只是將它加入這樣

<div class="card #66bb6a green lighten-1"> 
    <div class="card-content white-text"> 
     <span class="card-title">{{ yourdata.title }}</span> //asign youdata.title 
     {{#if currentUser}} 
      <p>{{ currentUser }}</p> 
     {{/if}} 
    </div> 
    <div class="card-action"> 
    <a class="card-nav" href="#">Navigation</a> 
     <a class="card-remove" href="#">Remove</a> 
    </div> 
</div>

以刪除或瀏覽你添加事件

Template.your_template_name.events({ 
    "click .card-remove": function() {   
     some_collection.remove(this._id); 
    } 
})

：

來源

2015-11-25 Wolf

如果你想創建多個模板只是將它們包裝在一個if語句中，如果你不想改變你的卡的結構，那麼就改變類。 –

我不確定你的意思。每個模板應該看起來像這樣具有不同的屬性（標題等）。我沒有設置它們的問題。我不知道如何將它們添加到JavaScript代碼並設置它們的事件。 – Wolf

你應該添加助手例子你可以在主模板中使用加

{{#each yourdata}} 
    {{> your_template_name}} 
{{/each}} 


<template name="your_template_name"> 
    <div class="card #66bb6a green lighten-1"> 
     <div class="card-content white-text"> 
      <span class="card-title">{{ title }}</span> 
      {{#if currentUser}} 
      <p>{{ currentUser }}</p> 
      {{/if}} 
     </div> 
     <div class="card-action"> 
      <a class="card-nav" href="#">Navigation</a> 
      <a class="card-remove" href="#">Remove</a> 
     </div> 
    </div> 
</template>

我會建議看看meteor.com他們有一些很好的教程。

來源

2015-11-25 12:16:38

謝謝你的回答，但你不瞭解我。我知道如何將數據添加到模板並註冊事件和助手。問題是我需要插入多個模板（相同的結構）。不只一個。因此，循環收集和插入每個模板。例如：如果我的集合有10個元素，我需要創建10個模板。我試過這個，它只創建1個模板。 – Wolf

@Wolf add {{each}}在你的模板中看到更新的答案我添加了一個例子。 –

謝謝一個男人。這像一個魅力。我不知道流星中每個人的真正力量：D – Wolf

流星從集合中添加html元素

回答

相關問題