수색…
소개
Blaze는 동적 인 반응적인 HTML 템플릿을 작성하여 사용자 인터페이스를 만드는 강력한 라이브러리입니다. Blaze 템플릿을 사용하면 루프 및 조건부 논리를 HTML 마크 업에 직접 사용할 수 있습니다. 이 절에서는 Blaze를 사용하여 Meteor.js에서 템플리트를 올바르게 사용하는 방법을 설명하고 보여줍니다.
메서드 호출에서 템플릿 채우기
<template name="myTemplate">
{{#each results}}
<div><span>{{name}}</span><span>{{age}}</span></div>
{{/each}}
</template>
Template.myTemplate.onCreated(function() {
this.results = new ReactiveVar();
Meteor.call('myMethod', (error, result) => {
if (error) {
// do something with the error
} else {
// results is an array of {name, age} objects
this.results.set(result);
}
});
});
Template.myTemplate.helpers({
results() {
return Template.instance().results.get();
}
});
템플릿의 데이터 컨텍스트
템플리트가 호출 될 때마다 템플릿의 기본 데이터 컨텍스트가 호출자로부터 암시 적으로 확보됩니다 (예 : childTemplate이 parentTemplate, 즉 호출자 템플리트의 데이터 컨텍스트를 얻음).
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate}}
{{/with}}
</template>
위의 상황에서 부모 템플릿에 대한 도우미 추출 데이터는 childTemplate에서 자동으로 가져옵니다. 예를 들어, {{firstname}} 및 {{lastname}}은 childTemplate에서도 액세스 할 수 있습니다.
<template name="childTemplate">
<h2>My name is also {{firstname}} {{lastname}}</h2>
</template>
아래 예제처럼 템플릿에 인수를 전달하여 childTemplate의 데이터 컨텍스트를 명시 적으로 정의 할 수도 있습니다.
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate childData=someHeplerReturningDataForChild}}
{{/with}}
</template>
도우미 someHelperReturningDataForChild 가 {profession : "Meteor Developer", 취미 : "stackoverflowing"}과 같은 객체를 반환한다고 가정하면이 특정 객체는 childTemplate의 명시적인 데이터 컨텍스트가됩니다. 이제 자식 템플릿에서 우리는 다음과 같은 것을 할 수 있습니다.
<template name="childTemplate">
<h2>My profession is {{profession}}</h2>
<h3>My hobby is {{hobby}}</h3>
</template>
템플릿 도우미
템플릿 도우미 는 Blaze의 필수 요소이며 비즈니스 로직과 템플릿에 대한 반응성을 모두 제공합니다. 템플릿 도우미는 실제로 종속성이 변경 될 때마다 다시 실행되는 반응식 계산 임을 기억하는 것이 중요합니다. 필요에 따라 템플릿 도우미를 전역으로 정의하거나 특정 템플릿으로 범위를 지정할 수 있습니다. 각 템플릿 도우미 정의 접근법의 예가 아래에 제공됩니다.
- 단일 템플릿으로 범위가 지정된 템플릿 도우미의 예입니다.
먼저 템플릿을 정의하십시오.
<template name="welcomeMessage">
<h1>Welcome back {{fullName}}</h1>
</template>
그런 다음 Template 도우미를 정의하십시오. 이 예제에서는 템플릿의 데이터 컨텍스트에 firstName 및 lastName 속성이 포함되어 있다고 가정합니다.
Template.welcomeMessage.helpers({
fullName: function() {
const instance = Template.instance();
return instance.data.firstName + ' ' + instance.data.lastName
},
});
- 전역 템플릿 도우미의 예 (이 도우미는 모든 템플릿 내에서 사용할 수 있습니다.)
먼저 도우미를 등록하십시오.
Template.registerHelper('equals', function(item1, item2) {
if (!item1 || !item2) {
return false;
}
return item1 === item2;
});
equals 도우미를 정의하면 모든 템플릿 내에서 사용할 수 있습니다.
<template name="registration">
{{#if equals currentUser.registrationStatus 'Pending'}}
<p>Don't forget to complete your registration!<p>
{{/if}}
</template>
