メーターナビゲーションテンプレートをヘルパーやjQueryで設定する必要がありますか？

Meteorのベストプラクティスに関する質問です。現時点では、複数のテンプレートがアクティブな状態でコード化されていますが、CSSとjQueryでは無効になっています。したがって、このような何か：CSSメーターナビゲーションテンプレートをヘルパーやjQueryで設定する必要がありますか？

#about, #contact {display: none}

で

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

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

次にjQueryの中で、私はちょうどアクティブになるようになっているものは何でもページに基づいてクリックするだけでこれらのプロパティを変更します。

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

このようにして何か問題はありますか？特にページ自体は反応的である必要はなく、むしろその内容であるからです。

出典

2016-05-17 Jason Chen

何か問題がありますか？わかりませんが、後にReactへの移行を決定した場合には問題になりますが、これはJQueryではうまく機能しません。しかし、ブレイズの場合、これはうまくいくでしょう。

「流星」の方法は、ヘルパーとハンドルバー#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がテンプレートを追加したり削除したりするときに、フックを使ってトランジションやアニメーションを処理する方法はありますが、従来のクラスの追加/削除の方法で処理するほうがはるかに簡単です。

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

これはスムーズにディスプレイからテンプレートを追加または削除することができるという利点を与えます。

出典

2016-05-17 23:17:48

これらのテンプレートをすべて同時にページロードすることは心配です。巨大なテンプレートとアプリケーションを使って流星のサイトを作ったらどうしたらいいですか？ plain olのHTMLまたはPHPを使用すると、小さな部分をページに配置するのと同じくらい簡単です。流星がSPAであるため、すべてが同時に起動されます。 –

これは間違いありませんが、トレードオフです。最初の読み込みは遅くなります（ただし、圧縮と圧縮では実際にはそれほど悪くはありません）。しかし、一度読み込まれると、応答がはるかに速くなります。流星を使って非常に大きなアプリケーションを作成した場合、webpackのようなものを見て、ファイルの読み込みを分割することができます：https://github.com/thereactivestack/meteor-webpack/tree/master/packages/webpack/ –

メーターナビゲーションテンプレートをヘルパーやjQueryで設定する必要がありますか？

答えて

関連する問題