숨겨진 요소 다시 렌더링

Question

페이지 왼쪽에 표시되는 게시물 목록과 오른쪽에 숨겨진 표시 컨테이너가있는 유성 앱을 만듭니다. 사용자가 게시물 제목을 클릭하면 표시 컨테이너가 페이지의 오른쪽에 표시되고 전체 게시물이 표시됩니다. 이제 전체 게시물을 표시하는 컨테이너는 처음에는 숨겨져 있으며 요소에는 핸들 막대 표현식이 채워져 있습니다. 다른 게시물을 클릭하면 동일한 디스플레이 컨테이너가 열려 있지만 내용이 변경된 것입니다. 게시물

클릭

Template.postsList.events({ 
    'click .post': function (e, template) { 
     e.preventDefault(); 
     Session.set('selectedPost', this._id); 
    } 
}); 

예 핸들 식

Template.postDisplay.title = function() { 
    return Posts.findOne(Session.get('selectedPost')).title 
} 

모든 디스플레이 용기의 반응성 자연 제외 아니라 잘 작동된다. 데이터베이스의 내용이 변경되면 (추가 된 주석, 제목 변경 등) 디스플레이가 다시 숨겨지고 게시물을 다시 클릭해야합니다. postsList 템플릿에는 모든 값이 깜박임이나 아무런 문제없이 정상적으로 원활하게 업데이트됩니다.

디스플레이 컨테이너의 값을 숨기지 않고 업데이트하는 방법이 있습니까?

이것은 컨테이너를 표시 한 방법입니다. 그냥 정기적으로 표시하고 숨 깁니다. 요소에 문서로드

$('#post-display-container').hide(); 

에

는 postDisplay 템플릿의

$('.title').click(function() { 
    $('#post-display-container').show() 
}); 

예를 클릭합니다. 물론 나는 모든 것을하지 않았습니다.

<template name="postDisplay"> 
    {{#each posts}} 
    <h3 class='title'>{{title}}</h3> 
    <p class='body'>{{body}}</p> 
    {{/each}} 
</template> 

유성 문서에서

Template.postDisplay.helpers({ 
    posts: function() { 
     return Posts.find(Session.get('selectedPost')); 
    } 
}) 

Answer 1

템플릿 도우미에있는 session.equal 원하는 게시물을 클릭 할 때 당신은 무엇을 볼 수 있습니다.

왼쪽에 게시물에 선택된 클래스를 추가하면 현재 선택된 게시물을 파악할 수 있습니다.

그리고 오른쪽에는 세션을 기준으로 현재 선택된 게시물 만 표시됩니다. 클릭 할 때 게시물을 표시하지 마십시오. 그 게시물을 만드는 몇 가지 클래스를 넣어 생각해보십시오.

분명히 밝히고 싶다면 포스트 디스플레이를 아래와 비슷한 모양으로 변경해야합니다. 그래도 클래스를 다시 렌더링하고 오른쪽에있는 게시물을 계속 표시해야합니다. 그런데 페이지가로드 될 때 .hide()를 제거하고 게시물을 클릭 할 때 동작을 변경하여 세션을 새로운 현재 선택된 게시물로 변경하십시오.

<template name="postItem"> 
    <div class="{{postClass}}">{{title}}</div> 
</template> 

Template.postItem.postClass = function() { 
    return Session.equals("selectedPost", this._id) ? 
     "selected" : ""; 
};