전체 템플릿을 다시로드하지 마십시오.

Question

저는 지금 Meteor Wordplay 예제로 작업 중입니다. 내가 가고있는 프로젝트는 https://github.com/ajcrites/meteor-wordplay

입니다. 추가하고 싶은 기능 중 하나는 중복 된 단어를 표시하지 않고 중복 된 단어를 빨간색으로 강조 표시하는 것입니다 (애니메이션으로 표시). 이 작업을 통해 작업 할 수 있습니다.

Meteor.call('score_word', word_id, function (error, result) { 
    if (result !== undefined) { 
     var bg = $("#word_" + result.id).css('background-color'); 
     $("#word_" + result.id).css('background-color', 'red'); 
     //Otherwise transition takes effect *before* BG color is applied 
     setTimeout(function() { 
      $("#word_" + result.id).css('transition', 'all 2s') 
       .css('background-color', bg); 
     }, 10); 
    } 
}); 

서버에 복제 된 단어 ID가 있으면 다시 보냅니다.

잘 작동하지만 문제는 단어가 추가 될 때마다 > words 템플릿이 다시 그려지는 것처럼 보입니다. 나는 애니메이션이 계속 진행되고 있기 때문에 HTML이 바뀌었기 때문에 생각했습니다.하지만 CSS를 사용하여 애니메이션을 만들었고, 중복 된 단어가 없어도 전체 템플릿이 다시 그려지는 것을 볼 수 있습니다.

나는 대답 대신 다른 추상적 수집의 템플릿에서 반환하는 유성 컬렉션을 사용하는 것입니다 말했다 이전 유성에 질문을 찾았지만, 지금까지 내가 말할 수있는 나는 :

Template.words.words = function() { 
    return Words.find({game_id: game() && game()._id, 
     player_id: this._id}); 
}; 

1. 매번 > words 템플릿 전체가 다시 그려지는 것을 멈출 수 있습니까? 템플릿에 새 단어 만 추가하는 방법이 있습니까?
2. # 1에 대한 답변에 관계없이 > words 템플릿이 업데이트 되더라도 복제 된 단어에 빨간색 BG를 애니메이션으로 적용하고 전체 애니메이션을 통과시키는 방법이 있습니까?
는

내가 틀리지 경우 어려운 질문이 나를 downvote하지 마십시오 것을 대답하려고합니다

Answer 1

:

1. 난 당신이 현재 할 수 없습니다 생각합니다. 어쩌면 그들은 다음 렌더링 시스템에있을 것입니다.
2. 예, 그렇지만 현재 시스템에서는 사소하지 않다고 생각합니다. 사용자가 카드를 선택할 때 카드를 회전시켜야하는 게임이 있습니다. 내가 한 일은 div를 복제하는 것이 었습니다. 하나는 마지막 카드를 받고 다른 카드는 현재 카드를받습니다. 그래서 jQuery에서는 .show() 또는 .hide() 및 .addClass()를 사용하여 애니메이션을 수행합니다. 수업 시간에는 카드를 회전시키는 장면 전환 등이 있습니다.

.

그것은 설명하기 매우 어렵다

{{#with player_next_card}} 
<div id="player-next-card" class="inner-card" style="display: none;"> 
<!--- stuff here ---> 
</div> 
{{/with}} 
{{#with player_last_card}} 
<div id="player-last-card" class="inner-card"> 
<!--- same stuff with other info here ---> 
</div> 
{{/with}}