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

Meteor.js affecting only newly inserted child template

本文关键字：插入 js 影响 新插入 Meteor      更新时间：2023-09-26

这些是模板：

<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.redered影响页面中的所有帖子，但我需要只影响新插入的帖子，而不影响现有的帖子。

我要假设新的帖子被添加到列表的顶部？如果是…

<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突变。

相关文章：