Question

这些是模板：

<template name="postsList">
  {{#each posts}}
    {{>postItem}}
  {{/each}}
</template>

<template name="postItem">
  <div class="more-less">
    <div class="more-block">
      <p>{{{text}}}</p>             
    </div>
    <p class="continued">…</p>
    <a href="#" class="show-more">[ + ]</a>
  </div>
</template>

当使用新帖子更新帖子时，会将 postItem 插入 postsLists 。如何仅将此应用于新插入的 postItem 模板：

$('.more-less .more-block').css('height', 20).css('overflow', 'hidden');

Template.postItem.rendered 会影响页面中的所有帖子，但我只需要影响新插入的帖子，而不会影响现有帖子。

Answer 1

我将假设新帖子被添加到列表顶部？如果是的话......

<template name="postsList">
    <div class="posts-list">
    {{#each posts}}
        {{>postItem}}
    {{/each}}
    </div>
</template>

<template name="postItem">
    <div class="more-less">
        <div class="more-block">
            <p>{{{text}}}</p>             
        </div>
        <p class="continued">…</p>
        <a href="#" class="show-more">[ + ]</a>
    </div>
</template>

您可以使用CSS实现此目的：

.posts-list .more-less:first-child .more-block {
    height: 20px;
    overflow: hidden;
}

无需使用JavaScript并担心反应性和DOM突变。

Meteor.js仅影响新插入的子模板

1 个答案: