Динамическая загрузка шаблонов (частичных) с помощью Blaze Meteor js - PullRequest
Новая
       31

Динамическая загрузка шаблонов (частичных) с помощью Blaze Meteor js

0 голосов
/ 12 июня 2018

Любой способ динамически загрузить шаблон с помощью метода onCreated Meteor js.У меня другой шаблон и одна область отображения (основной шаблон).

<template name="main">

</template>

загруженный по умолчанию шаблон 

<template name="default">
</template>

Загруженные шаблоны по ссылкам 

<template name="page1">
</template>

<template name="page2">
</template>

Есть ли способ использовать функцию oncreated для загрузки по умолчанию и удалить(по умолчанию) и загрузить другой шаблон в тот же основной шаблон, когда они нажаты?Я ценю.

1 Ответ

0 голосов
/ 12 июня 2018

Оформить Template.dynamic .

Позволяет загружать шаблон только по его имени.Здесь все просто, потому что вы можете позволить вашему шаблону обрабатывать динамические имена, используя Reactive var или Reactive Dict.

Объявите несколько шаблонов: 

<template name="main">
 {{> Template.dynamic template=getTemplateName }}

 <button class="loadTemplate" data-target="page1">Load Page 1</button> 
 <button class="loadTemplate" data-target="page2">Load Page 2</button> 
</template>

<template name="page1">
</template>
<template name="page2">
</template>

<template name="default">
</template>

В вашем основном шаблоне вы можете установить onCreated имя шаблона по умолчанию default: 

Template.main.onCreated(function(){
  this.state = new ReactiveDict();
  this.state.set("targetTemplate", "default");
})

Получить шаблон для загрузки через помощника: 

Template.main.helpers({
  getTemplateName() {
    return Template.instance().state.get("targetTemplate");
  },
})

И установить новое имя шаблона с помощью события нажатия кнопки: 

Template.main.events({
  'click .loadTemplate'(event, templateInstance) {
    event.preventDefault();
    const targetName = $(event.currentTarget).attr('data-target');
    templateInstance.state.set("targetTemplate", targetName);
  }
})

Конечно, вы можете сделать это и с помощью других событий, кроме как нажатием кнопки, поскольку в зависимости от ReactiveDict / ReactiveVar он будет отображать новый шаблон при обновлении переменной.

Примечание: оченьважно также обрабатывать данные, которые передаются в шаблон.Как только ваш динамический шаблон станет более сложным, вы также должны больше об этом знать.

...