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，这将是一个问题，React不能很好地与JQuery一起工作。但是对Blaze来说，这样可行。

＆＃34;流星＆＃34;方法是使用助手和把手#if语句。

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

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

然后在.js文件中，您可以将帮助器定义为＆＃34; showHome＆＃34;：

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

然而，这使得很难进行CSS转换。虽然有很多方法可以在Blaze添加或删除模板时使用钩子处理过渡和动画，但是以更传统的方式添加/删除类更容易处理它。

<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
}

这样可以在显示屏上平滑地添加或删除模板。

我应该用帮助器或jQuery设置Meteor导航模板吗？

1 个答案: