我应该用助手设置 Meteor 导航模板，还是 jQuery？

Question

只是关于 Meteor 最佳实践的问题。目前，我已经编写了一个具有多个活动模板的站点，但使用 CSS 和 jQuery 禁用了。所以像这样：

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home"><div id="home">
stuff
</div></template>

在CSS

#about, #contact {display: none}

然后在 jQuery 中，我将根据应该处于活动状态的任何页面通过单击来更改这些属性。

$(document).on('click', '#aboutbutton', function(){
$('#home').fadeOut( set time out and enable about page)
});

这样做有什么问题吗？特别是因为页面本身不需要是反应性的，而是它们的内容？

Answer 1

这有什么问题吗？不确定，但如果您以后决定迁移到 React，这将是一个问题，它不能很好地与 JQuery 一起工作。但是对于 Blaze，这会起作用。

"Meteor" 方法是使用助手和把手 #if 语句。

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home">
 {{#if showHome}}
 <div id="home">
  stuff
 </div>
 {{/if}}
</template>

然后在 .js 文件中，您可以定义一个帮助程序 "showHome":

Template.home.helpers({
  showHome() {
     return someBooleanVariable
  },
});

然而，这使得 CSS 转换变得困难。虽然有一些方法可以在 Blaze 添加或删除模板时使用钩子处理过渡和动画，但以 adding/removing 类.

更传统的方式处理它要容易得多

<body>
{{> home }}
{{> about }}
{{> contact }}
</body>

<template name="home">
 <div id="home" class="template {{#if showHome}}showTemplate{{/if}}>
  stuff
 </div>
</template>

助手与上面相同，但样式表为：

.template {
  transition: opacity 0.3s ease;
  opacity: 0
  /* Some other way of hiding, e.g. offscreen, width: 0 */
}
.showTemplate {
  opacity: 1
}

这样做的好处是可以顺利地在显示中添加或删除模板。

我应该用助手设置 Meteor 导航模板，还是 jQuery？

Should I be setting Meteor navigation templates with helpers, or jQuery?

javascript

meteor

meteor-blaze