지난 글에서 잘 따라왔다면
./client/main.html
<head>
<title>dapp1</title>
</head>
<body>
{{> main}}
</body>
<template name="main">
<h1>My ethereum wallet</h1>
<div>
<label for="wallet">Wallet Address</label>
<span id="balance">{{address}}</span>
</div>
<div>
<label for="balance">Balance</label>
<span id="balance">{{balance}} Wei(ETH)</span>
</div>
</template>
./client/main.js
Template.main.helpers({
address() {
return '0x1111111111';
},
balance() {
return '100000';
}
})
처음 프로젝트에서 이 두개의 파일을 변경한 상태일 것입니다.
http://blazejs.org/guide/spacebars.html#Attribute-Helpers 참조하세요.
{{attribute}}로 사용한 것은 javascript(이하 js)에서 Template.<템플릿이름>.helpers 함수에 object형태로 인자를 넘겨 정의할 수 있습니다.
html 에서 <template name="main">에서 사용한 name 속성인 main과 같은 이름으로 Template.main.helpers 호출하고 key/value 형태의 JSON Object를 넘겨줍니다.
원래대로 JSON Object형태라면
{
address: '0x1111111111',
balance: '100000'
}
와 같은 모양이겠지만 주소(address)와 잔액(balance)은 언제나 변할 수 있습니다. 심지어는 화면을 보고 있는 도중에도 말이죠.
그런 경우를 가정하여 값으로 함수를 넘겨주도록 합니다.
{
address: function() {
return '0x1111111111';
},
balance: function() {
return '100000';
}
}
Meteor는 자체적으로 babel을 통한 ECMA6를 지원합니다.
따라서 function을 값으로 갖는 경우엔
{
address() {
return '0x1111111111';
},
balance() {
return '100000';
}
}
이와 같이 function을 축약해서 사용할 수 있습니다. function을 매번 functino로 오타를 내는 저에겐 꽤 유용했습니다 :)
이렇게 각각 helper를 줄 수도 있지만 address와 balance를 account라는 하나의 object로 묶어서 보낸다고 치면 어떻게 할까요?
{
account() {
return {
address: '0x1111111111',
balance: '100000'
};
}
}
그리고 template에선 {{address}}, {{balance}} 대신 {{account.address}}, {{account.balance}} 를 통해 받을 수 있습니다.
여기까지 적용해 보면
./client/main.html
<template name="main">
<h1>My ethereum wallet</h1>
<div>
<label for="wallet">Wallet Address</label>
<span id="balance">{{account.address}}</span>
</div>
<div>
<label for="balance">Balance</label>
<span id="balance">{{account.balance}} Wei(ETH)</span>
</div>
</template>
./client.main.js
Template.main.helpers({
account() {
return {
address: '0x1111111111',
balance: '100000'
};
}
});
이와 같습니다.
helpers 에서 두번 return 하던 것이 줄어들어서 기분이 좋습니다.
만일 account 하나가 아니라 accounts라는 이름으로 여러개의 계정이 있다면 어떨까요?
Template.main.helpers({
accounts() {
return [
{
address: '0x1111111111',
balance: '100000'
},
{
address: '0x2222222222',
balance: '200000'
}
];
}
});
이와 같은 배열(Array)형태로 들어오겠죠.
우리는 여기서 Block helpers를 사용하여 간단하게 복수 array를 처리할 수 있습니다.
기존의
<div>
<label for="wallet">Wallet Address</label>
<span id="balance">{{account.address}}</span>
</div>
<div>
<label for="balance">Balance</label>
<span id="balance">{{account.balance}} Wei(ETH)</span>
</div>
html template을 수정하여
accounts에서 하나씩 account를 뽑아내도록 {{#each account in accounts}}로 시작해서 {{/each}}로 끝나는 Blockhelper로 감싸줍니다.
{{#each account in accounts}}
<div>
<label for="wallet">Wallet Address</label>
<span id="balance">{{account.address}}</span>
</div>
<div>
<label for="balance">Balance</label>
<span id="balance">{{account.balance}} Wei(ETH)</span>
</div>
{{/each}}
브라우저를 봅니다.
여기까지 어떠셨나요?
일단 화면 구성은 여기까지입니다.
- helper를 사용하여 js에서 template으로 값을 전달하고
- object를 반환하여 a.b 스타일의 dot notation으로 하위 키 값을 접근도 해보았고
- helper가 복수개의 배열(Array)일때
{{#each.. in}}을 사용해서 반복하는 것도 해보았습니다.
다음엔 ethereum:accounts를 사용하여 실제 ethereum 계정과 연결해봅니다.
Stay tune! 팔로우 하시고 Upvote 해주세요!