meteor
블레이즈 템플릿

소개

메서드 호출에서 템플릿 채우기

<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의 필수 요소이며 비즈니스 로직과 템플릿에 대한 반응성을 모두 제공합니다. 템플릿 도우미는 실제로 종속성이 변경 될 때마다 다시 실행되는 반응식 계산 임을 기억하는 것이 중요합니다. 필요에 따라 템플릿 도우미를 전역으로 정의하거나 특정 템플릿으로 범위를 지정할 수 있습니다. 각 템플릿 도우미 정의 접근법의 예가 아래에 제공됩니다.

1. 단일 템플릿으로 범위가 지정된 템플릿 도우미의 예입니다.

먼저 템플릿을 정의하십시오.

<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
  },
});

2. 전역 템플릿 도우미의 예 (이 도우미는 모든 템플릿 내에서 사용할 수 있습니다.)

먼저 도우미를 등록하십시오.

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>