如何使用meteor將更多html添加到div？

Question

在jquery中很容易，$('#xiv').append('my html')，但由於混合了HTML和JavaScript，看起來很混亂。

我該如何做到流星的方式？

Answer 1

你仍然可以在流星中使用jQuery。

流星的方式不是用HTML代碼片段手動改變你的div。

相反，定義一個流星模板，解釋如何根據底層數據重現頁面的html。然後訂閱您的應用程序的數據和更新。

的classic leaderboard Meteor example包含此模板：

<template name="leaderboard"> 
    <div class="leaderboard"> 
    {{#each players}} 
     {{> player}} 
    {{/each}} 
    </div> 

    {{#if selected_name}} 
    <div class="details"> 
    <div class="name">{{selected_name}}</div> 
    <input type="button" class="inc" value="Give 5 points" /> 
    </div> 
    {{else}} 
    <div class="none">Click a player to select</div> 
    {{/if}} 
</template> 

查看第一div，用類排行榜。

{{#each players}}看起來不像HTML，是嗎？

'{{#each array}} is a template directive that causes the HTML up to the closing {{/ each}} to be executed in a loop over the array, in this case the players` array。

{{>player}}調用單個玩家的模板。

這裏是被調用的玩家模板。每個玩家模板都會在每個循環中反覆調用每個特定玩家的數據。

<template name="player"> 
    <div class="player {{selected}}"> 
    <span class="name">{{name}}</span> 
    <span class="score">{{score}}</span> 
    </div> 
</template> template: 

還有一個javascript方面，但它在排行榜示例和主要流星文檔中都有很好的介紹。