#TernopilJS

MeteorJS

Лекція 3. Шаблони в Meteor

Лектор - Михайло

Код - github.com/ternopiljs

Презентації - slides.com/ternopiljs

Новини - vk.com/ternopiljs

Meteor Templating System

Meteor Templating System

Spacebars

Spacebars

• Створення власних хелперів і слухачів подій.
• Використання JS об'єктів як аргументів. 
• Підтримка HTML атрибутів.
• Створення власних блочних хелперів.

4 типи тегів:

• Теги з подвійними фігурними дужками {{ ... }}

• Теги з потрійними фігурними дужками {{{ ... }}}

• Теги включення {{> ... }}

• Блочні теги {{#template}} ... {{/template}}

{{ ... }}

Template.hello.helpers({
  name: 'Michael',
  surname: function () {
    return 'Rokosh'.toUpperCase();
  }
});

<template name="hello">
  <p>My name is {{name}} {{surname}}</p>
</template>

HTML

Javascript

{{{ ... }}}

Template.hello.helpers({
  name: function () {
    return '<i>Michael</i> <b>Rokosh</b>';
  },
});

<template name="hello">
  <p>My name is {{name}}</p>
</template>

HTML

Javascript

{{> ... }}

<template name="hello">
  <p>Nice to meet you!</p>
  {{> greeting name="Michael" surname="Rokosh"}}
</template>

<template name="greeting">
  <p>My name is {{name}} {{surname}}.</p>
</template>

HTML

{{#template}} ... {{/template}}

<template name="hello">
  <p>Nice to meet you!</p>
  {{# greeting "Michael Rokosh"}}
    By the way, my name is
  {{/greeting}}
</template>

<template name="greeting">
  <blockquote>
    <p>
      <b>
        <i>
          - {{> UI.contentBlock}} {{this}}
        </i>
      </b>
    </p>
  </blockquote>
</template>

HTML

Блочні хелпери Spacebars

#if

#unless

#with

#each

#if / #unless

Template.hello.helpers({
  image: function () {
    return {
      src: 'http://lorempixel.com/100/100',
      title: 'Foo Bar'
    }
  }
});

<template name="hello">
  {{#if image}}
    <img src="{{image.src}}">
    {{#unless image.title}}
      <p>no title</p>
    {{else}}
      <p>{{image.title}}</p>
    {{/unless}}
  {{else}}
    <p>no image</p>
  {{/if}}
</template>

HTML

Javascript

#with

Template.hello.helpers({
  image: function () {
    return {
      src: 'http://lorempixel.com/100/100',
      title: 'Foo Bar'
    }
  }
});

<template name="hello">
  {{#with image}}
    <img src="{{src}}">
    <p>{{title}}</p>
  {{/with}}
</template>

HTML

Javascript

#each

Template.hello.helpers({
  images: function () {
    return [
      'http://lorempixel.com/100/100', 
      'http://lorempixel.com/100/110', 
      'http://lorempixel.com/100/120'
    ];
  }
});

<template name="hello">
  {{#each images}}
    <img src="{{this}}">
  {{/each}}
</template>

HTML

Javascript

Events

click, dblclick, focus, blur, change, mouseenter, mouseleave, mousedown, mouseup, keydown, keypress, keyup

Events

Template.hello.events({
  'click button': function (e, tmpl) {
    console.log('Button clicked!');
  },
  'submit form': function (e, tmpl) {
    e.preventDefault();
    console.log('Form is submitted');
  }
});

Template Lifecycle

Template.hello.created = function () {
  this.foo = 'Foo bar';
  console.log('Template instance is created!');
};

Template.hello.rendered = function () {
  console.log(this.foo); // 'Foo bar'
  console.log('Template is rendered!');
};

Template.hello.destroyed = function () {
  console.log('Template is destroyed!');
};

Екземпляр шаблону

Template.hello.created = function () {
  this.foo = 'Foo bar';
  console.log('Template instance is created!');
};

Template.hello.rendered = function () {
  console.log(this.foo); // 'Foo bar'
  console.log('Template is rendered!');
};

Template.hello.destroyed = function () {
  console.log('Template is destroyed!');
};

Template.greeting.events({
  'click button': function (e, tmpl) {
    console.log(tmpl.foo) // Foo bar
  }
});

Template.greeting.helpers({
  name: function () { 
    return Template.instance().foo; // Foo bar
  }
});

• Маршрутизація.
• Iron-router.

У наступній лекції:

Д/З

Сайт-візитка на Meteor з використанням шаблонів, хелперів.