Question

在不创建路线的情况下更改网页内容的最佳做法是什么？

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

如何在不创建新路线的情况下隐藏/显示仪表板内的模板组件？是应该在帮助器中使用html中的某种if / else逻辑并使用helper for on button按钮来完成？假设我想根据按钮点击（href）在仪表板模板中显示不同的内容。

请提供最佳实践和良好的解决方案，这些解决方案很容易使用很多组件。

Answer 1

如何在没有的情况下隐藏/显示仪表板内的模板组件创建一条新路线？应该使用某种方式在助手中完成在html中使用if / else逻辑并使用helper for on button？

你可以这样做，但你应该知道一些要点，以保持你的代码清洁和模块化：

尝试将信息中心的部分内容包装到自己的模板中以保持代码清洁
使用ReactiveDict支持许多ReactiveVar个实例
在模板中包装重复的部分，以减少重复的代码
在全球范围内或在信息中心的最上层模板中注册定期帮助程序
在父模板上订阅在仪表板的所有部分共享的数据，并订阅相应组件中的本地数据
使用autorun和subscription.ready()并显示加载指示符，直到订阅准备就绪。不要等待在渲染之前加载所有东西，因为这可能会大大减少用户体验。

我想说我想在仪表板模板中显示不同的内容基于按钮点击（href）。

您可以将数据属性附加到按钮，该按钮具有要切换的目标的特定ID：

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

然后，您可以阅读此ID并在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中。这增加了优势，即在重新加载页面或通过链接共享时，页面状态可以完全恢复。
容易使用大量组件是一个矛盾，我不知道你是否期望一些神奇的粉扑可以为你解决这种复杂问题。作为一名软件工程师，您可以将复杂性抽象为较小的部分，直到您能够在一定的范围内解决问题。

没有路由的流星动态内容

1 个答案: