Метеоритный динамический контент без маршрутизации

Question

Как лучше менять контент на странице, не создавая маршрут?

BlazeLayout.render('mainLayout', { top: 'header', menu: 'menu', main: 'dashboard', bottom: 'footer' });

Как я могу скрыть / показать компоненты шаблона внутри панели инструментов, не создавая новый маршрут? Должно ли это быть сделано в помощниках, использующих какую-то логику if/else в html и использующую помощник для нажатия кнопки? Допустим, я хочу показать различный контент в шаблоне панели мониторинга на основе нажатий кнопок (href).

Пожалуйста, предоставьте лучшую практику и хорошее решение, которое легко с большим количеством компонентов.

Answer 1

Как я могу скрыть / показать компоненты шаблона внутри панели инструментов, не создавая новый маршрут? Должно ли это быть сделано в помощниках, использующих какую-то логику if / else в html и использующую помощник для нажатия кнопки?

Вы можете сделать это, но вы должны знать о некоторых моментах, чтобы ваш код был чистым и модульным:

• Попытайтесь обернуть части своей панели в собственные шаблоны, чтобы сохранить код в чистоте
• использование ReactiveDict в пользу многих ReactiveVar экземпляры
• Оберните повторяющиеся части в шаблоны, чтобы уменьшить дублирование кода
• Зарегистрируйте повторяющихся помощников по всему миру или в самом верхнем шаблоне вашей панели инструментов.
• Подписаться в родительском шаблоне на данные, которые являются общими для всех частей панели управления, и подписаться на локальные данные в соответствующих компонентах.
• использование autorun а также subscription.ready() и отображать индикатор загрузки, пока подписка не будет готова. Не ждите загрузки всего перед рендерингом, так как это может значительно уменьшить UX.

Допустим, я хочу показать различный контент в шаблоне панели мониторинга на основе нажатий кнопок (href).

К кнопке можно прикрепить атрибут данных, который имеет конкретный идентификатор цели, которую нужно переключить:

<template name="dashboardComponent">
  <a href class="toggleButton" data-target="targetId">My Link</a>
</template>

Затем вы можете прочитать этот идентификатор и переключить его состояние в вашем ReactiveDict:

Template.dashboardComponent.events({
  'click .toggleButton'(event, templateInstance) {
    event.preventDefault();

    // get the value of 'data-target'
    const targetId = $(event.currentTarget).attr('data-target');

    // get the current toggle state of target by targetId
    const toggleState = templateInstance.state.get( targetId );

    // toggle the state of target by targetId
    templateInstance.state.set( targetId, !toggleState );
  }
});

Затем в вашем шаблоне вы можете попросить сделать рендеринг простым if / else:

<template name="dashboardComponent">
  <a href class="toggleButton" data-target="targetId">My Link</a>
  {{#if visible 'targetId'}}
    <div>target is visible</div>
  {{/if}}
</template>

А твой помощник возвращает состояние

Template.dashboardComponent.helpers({
  visible(targetName) {
    return Template.instance().state.get(targetName);
  }
});

Может быть проблема разделения состояния между родительским и дочерним шаблонами, и я предлагаю вам избегать Session где возможно. Тем не менее, как новичок, это гораздо проще для первого использования Session а затем пошагово продвигаться к более разъединенному (параметризованным шаблонам) решению.

Пожалуйста, предоставьте лучшую практику и хорошее решение, которое легко с большим количеством компонентов.

Это высокий спрос, и ваша компетенция - работать над обоими! Однако вот краткий взгляд на это:

• Лучшая практика - это то, что работает для вас, плюс может работать для других в других случаях использования. Попробуйте поделиться своей работой с другими, чтобы увидеть, где она потерпит неудачу в их случае использования.

• Преимущество использования маршрутов состоит в том, что вы можете использовать параметры запроса для сохранения текущего состояния просмотра в URL. Это добавляет преимущество в том, что при перезагрузке страницы или публикации по ссылке состояние страницы может быть полностью восстановлено.

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