Meteor 템플릿 요소가 (다시) 렌더링 중 스타일을 잃습니다.

Question

매초마다 한 번 반응적으로 업데이트되는 텍스트가있는 템플릿이 있습니다.

버튼을 클릭하면 비활성화 된 버튼을 표시하도록 스타일이 변경됩니다. 위의 조건으로 인해 템플릿이 다시 렌더링 되 자마자 버튼이 원래 스타일로 되돌아갑니다. . 마치 전체 템플릿이 처음부터 렌더링되는 것처럼 보입니다 (template.render는 매초 실행됩니다).

정상입니까? 반응 형 {{btnstyle}} 유형의 메커니즘을 통해 스타일을 제어해야합니까?

Answer 1

예, 템플릿 도우미 함수에 의해 설정된 class을 통해 스타일을 설정하는 것이 일반적입니다. 버튼/입력 요소를 비활성화를 들어, 당신은 단지 class 대신 disabled 속성을 사용할 수 있습니다 : 다음

<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button> 

또는

<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} /> 

및 작업을 수행합니다

Template.yourFormTemplate.buttonDisabled = function() { 
    // return true or false depending on if the button should be disabled 
}; 

문제가 유성이다 템플릿을 다시 렌더링하면 스타일을 설정하는 요소가 실제로 새 것으로 대체됩니다. Meteor 팀은 현재 더 세분화 된 수준에서 작동하는 새로운 템플릿 엔진을 개발 중이므로 요소가 반드시 그런 식으로 교체되지는 않습니다.

meteor --release shark-1-29-2014-e 

또는 그러나

mrt --release shark-1-29-2014-e 

, 그것은 여전히 ​​일반적으로 class 속성을 통해 스타일 요소에 권장 설정 :이 명령을 사용하여 새 템플릿 엔진의 프리뷰 버전과 현재의 코드를 시도 할 수 있습니다 템플릿 도우미로. 이것은 자바 스크립트에서 직접 스타일을 설정하는 절대적인 방법보다는 일을하는 "유적 방식"에 더 잘 맞는 더 선언적이고 템플릿 중심의 접근 방식입니다. 또한 CSS를 사용하여 실제 스타일을 제어 할 수 있으므로 염려를 분리하는 데 도움이됩니다.