Повторное использование шаблона Blaze. Как получить доступ к вспомогательным функциям другого шаблона? - PullRequest
Новая
       34

Повторное использование шаблона Blaze. Как получить доступ к вспомогательным функциям другого шаблона?

2 голосов
/ 25 марта 2019

Я пытаюсь настроить предупреждение диалогового окна MDC. Вместо того, чтобы вставлять его в каждое представление, которое требует этого, я оборачиваю диалог в свой собственный шаблон. Кажется, что шаблон работает, диалоговое окно открывается и функционирует как обычно, однако я не могу установить вспомогательную функцию, которая работает. Я попытался использовать вспомогательную функцию родительского шаблона и даже создать новый шаблон для своего собственного файла js. Ни одно из этих решений не собирает данные правильно. 

<template name="transactionAlert">
...
<div class="mdc-dialog__content" ><p>Are you sure you wish to continue with this transaction? It could cost up to: <b class="warning-value">${{maxCost}} USD</b></p>
...
</template>

<template name="transactionCreate">
...
    {{>transactionAlert}}
</template>

Template.transactionAlert.onCreated(function transactionAlertOnCreated() {
    console.log('test')
})

Template.transactionAlert.helpers({
    maxCost(){
        console.log('test 2')
        const instance = Template.instance()
        return instance.maxTxCost.get().toString().slice(0,5);
    }
})

1 Ответ

0 голосов
/ 26 марта 2019

Я пытался использовать вспомогательную функцию родительского шаблона

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

В противном случае вы будетесоздайте такую ​​тесную связь, которая через два года (когда вызовет сеанс рефакторинга) вызовет у вас отвращение.

Напротив, обязанности родительского шаблона заключаются в

  • управлять состоянием данных (подписки, пост-обработка данных и т. Д.)
  • проверять условия, должен ли transactionAlert появляться или исчезать
  • передавать нужные параметры transactionAlert Template

Как следствие, вы можете создать предупреждение о транзакции как параметризованный шаблон: 

<template name="transactionAlert">
...
<div class="mdc-dialog__content" ><p>Are you sure you wish to continue with this transaction? It could cost up to: <b class="warning-value">${{maxCost}} USD</b></p>
...
</template>

Как вы можете видеть, оно выглядит точно так же.Разница в том, что вы удаляете Template.transactionAlert.helpers и заставляете Шаблон искать maxCost, который передается в шаблон.

Теперь в родительском шаблоне вы передадите данные в transactionalert, один разприменяется условие оповещения: 

<template name="transactionCreate">
  {{#if showAlert}}
    {{>transactionAlert maxCost=getMaxCost}}
  {{/if}}
</template>

, где теперь находится помощник: 

Template.transactionCreate.helpers({
    showAlert () {
      return Template.instance().showAlert.get()
    },
    getMaxCost(){
      const instance = Template.instance()
      return instance.maxTxCost.get().toString().slice(0,5);
    }
})

Поскольку вам нужна реактивность, чтобы показать / скрыть предупреждение, вы будете использовать внутренний трекер шаблона:

Template.transactionCreate.onCreated(function () {
  const instance = this
  instance.showAlert = new ReactiveVar(false)
  instance.autorun(() => {
    const maxCost = instance.maxTxCost.get()
    if (/* max cost exceeds limit */) {
      instance.showAlert.set(true)
    } else {
      instance.showAlert.set(false)
    } 
  })
})

Редактировать: Дополнительная информация о реактивности

Реактивность - это основная концепция клиентской экосистемы Метеора.Он основан на пакете Tracker , который связан с любым экземпляром Template.Руководство по хранилищам реактивных данных объясняет концепцию немного дальше: https://guide.meteor.com/data-loading.html#stores

...