템플릿에서 텍스트를 조건부로 렌더링하는 올바른 방법 — 또는 한 번의 렌더링에서 VALUE를 두 번 수정하기

Digital Ocean Droplet을 (거의) 생성하고 Discourse를 설치하는 플러그인을 가지고 있습니다.

Rails 모델, 생성되는 droplet, 그리고 droplet에 설치되는 Discourse 인스턴스에 대한 정보를 렌더링하는 템플릿이 있는 페이지가 있습니다. Rails와 Ember 사이에서 필요한 모든 정보는 MessageBus를 통해 전달되고 있습니다. 다음 조건에 따라 다른 내용을 표시하려고 합니다.

  • droplet 생성에 필요한 정보가 충분한 경우
  • droplet을 생성하는 작업이 실행 중인 경우 (모델 내 정보를 업데이트함)
  • Discourse가 설치된 경우

하지만 계속 다음과 같은 오류가 발생합니다.

   You modified "hasStatus" twice on <@ember/component:ember660> in a single render.

수정: 같은 것을 관찰하는 computed 함수를 두 개 가지고 있었기 때문이었습니다…

마침내 깨달은 것이 있습니다. 템플릿에서 {{#if hasStatus}} (이는 computed 함수입니다)와 같은 것을 사용하면 안 된다는 것입니다. “droplet 생성” 버튼을 클릭하면 설치 상태 변수(installation_status)가 설정되어 설치 중 일어나는 일이 표시되므로, 상태를 표시하려면 페이지가 다시 렌더링되어야 하기 때문입니다.

아니면 제가 다른 오류를 일으키고 있고, 제가 하는 방식은 작동해야 하는 것일까요?

그래서 결국 <gasp> CSS를 사용하여 다양한 요소를 숨겨야 할 것 같습니다.

글쎄, 제가 이런 내용을 올릴 때 흔히 있는 일이지만, 정답은 제가 상상할 수 있는 것보다 훨씬 더 기이했습니다.

{{#if server.value}} 같은 구문을 사용하고 MessageBus를 통해 value가 전달되면, Rails 콘솔에서 업데이트를 수행할 때 예상대로 작동합니다. 값을 nil 또는 nil이 아닌 값으로 설정하면 해당 페이지 섹션이 예상대로 나타났다가 사라집니다. 터미널에서 Ansible 작업을 실행하면 Ansible이 라우트를 통해 새로운 값을 전달하고, 이는 레코드를 업데이트하며, 다시 메시지 버스로 전달되어 템플릿의 해당 섹션이 예상대로 나타납니다.

하지만 Ansible이 Discourse의 잡(job)에 의해 실행되는 경우에도 여전히 Rails가 메시지 버스에 내용을 전달한다고 주장합니다. 그리고 브라우저의 JavaScript 콘솔에서는 해당 값을 추적하는 계산 함수(computed function)가 실행되고 값이 null인 것을 볼 수 있습니다. 브라우저를 새로고침하면 데이터가 존재하고 페이지가 예상대로 렌더링됩니다. 아마도 이는 개발 환경의 특이한 현상일 수 있고, 프로덕션에서는 다를 수도 있습니다.

이것과 관련이 있을까요?

글쎄, 여전히 그 오류가 걱정되지만, 제 액션(action)에

         window.location.reload(true);

을 추가했고, 페이지가 새로고침된 후 모든 것이 정상적으로 작동하는 것 같습니다.