2015-03-18 6 views
0

Это шаблоны:Meteor.js ОПАСНЫЙ только недавно вставленный шаблон ребенка

<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 влияет на все посты в странице, но мне нужно влиять только недавно вставленную запись, не затрагивая существующие.

ответ

0

Я собираюсь предположить, что новые сообщения добавляются в начало списка? если так ...

<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.

+0

он не решает мою проблему, потому что мне нужны другие операции на postItem, кроме css – torayeff

Смежные вопросы