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