Meteor 에서 #constant를 사용하여 collection이 바뀌어도 특정 블록을 유지하기.

meteor는 collection을 기반으로 움직인다.
즉 collection이 변화가 있으면 해당하는 부분의 렌더링을 부분적으로 다시 하는데
고맙게도 preserve-input 이라는 패키지를 기본적으로 사용하여
전체를 다 로딩하지 않게끔 하고 있다.

<head>
  <title>replyExample</title>
</head>

<body>
  {{> Posts}}
</body>

<template name="Posts">
  <ul>
    {{#each posts}}
    <li>
      {{message}}
    </li>
    {{/each}}
  </ul>
  <input type="text" class="newPost"/>
</template>

최소한으로 컬렉션을 표시하는 html은 이런 형태일 것이다.

@Posts = new Meteor.Collection "posts"

if Meteor.isClient

  Template.Posts.posts = ->

    Posts.find {}

.coffee의 내용은 이렇게 되겠지.

하지만 재귀적으로 글>댓글 형식으로 구현할 경우 다소 문제가 된다.

<head>

  <title>replyExample</title>

</head>

<body>

  {{> Posts}}

</body>

<template name="Posts">

  <ul>

    {{#each posts}}

    <li>

      {{message}}

      {{#if replies}}

      <ul>

        {{#each replies}}

        <li>

          {{reply}}

        </li>

        {{/each}}

      </ul>

      {{/if}}

      <input type="text"/>

    </li>

    {{/each}}

  </ul>

</template>

이럴 경우 각각의 post마다 input 이 붙는데 update+$push를 사용하여 replies를 추가하면

Posts.update('<POST의 ID>',{$push:{"replies":{reply:"5"}}});

posts 부분을 다시 렌더링 하면서 #each replies 안쪽의 input 이 다시 렌더링되고 만다.

즉, 내가 댓글을 달려고 하는데 다른 곳에서 댓글을 달아버리는 경우 DDP를 통해 update 를 메시지를 받아 매번 input을 다시 그려버리게 된다.

isolate 를 쓴다던가 spark나 deps를 이용하는 방법도 있겠지만

이 경우는 실제로 <input type="text"/> 구간을 건드리지 않도록만 해도 된다.

http://docs.meteor.com/#constant 를 사용하여 적용해보자.

<head>

  <title>replyExample</title>

</head>

<body>

  {{> Posts}}

</body>

<template name="Posts">

  <ul>

    {{#each posts}}

    <li>

      {{message}}

      {{#if replies}}

      <ul>

        {{#each replies}}

        <li>

          {{reply}}

        </li>

        {{/each}}

      </ul>

      {{/if}}

      {{#constant}}

      <input type="text"/>

      {{/constant}}

    </li>

    {{/each}}

  </ul>

</template>

아주 간단하다.

별 상관은 없지만 https://www.eventedmind.com/posts/meteor-spark-isolate-annotation 같은 링크도 봐가면서 어떤 식으로 Meteor가 html 문서를 갱신하는지 구조를 봐두는 것도 좋다.