Question

在jquery中它很简单，$('#xiv').append('my html')但由于混合了HTML和JavaScript，它看起来很混乱。

我怎么能以流星的方式做到这一点？

Answer 1

你仍然可以在Meteor中使用jQuery。

流星方式不是手动使用HTML代码段来改变你的div。

相反，定义一个Meteor模板，解释如何基于底层数据重现页面的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`数组。

{{>player}}调用单个玩家的模板。

这是正在调用的播放器模板。在每个循环中一遍又一遍地调用单个播放器模板，其中包含每个特定播放器的数据。

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

这也有一个javascript方面，但它在排行榜示例和主要流星文档中得到了很好的介绍。

如何使用meteor将更多html附加到div？

1 个答案: