2013년 9월 9일 월요일

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 문서를 갱신하는지 구조를 봐두는 것도 좋다.