タグ付けされた質問 「handlebars.js」

ハンドルバーは、JavaScriptのテンプレートライブラリです。

26
handlebars.js {{#if}}条件付きの論理演算子
ハンドルバーJSで論理演算子を標準のhandlebars.js条件演算子に組み込む方法はありますか?このようなもの: {{#if section1 || section2}} .. content {{/if}} 自分のヘルパーを作成できることはわかっていますが、最初に、ホイールを再発明しないようにしたいと思います。

8
Mustache.jsとHandlebars.jsの違いは何ですか?
私が見た主な違いは次のとおりです。 ハンドルバーが追加され#if、#unless、#with、および#each ハンドルバーはヘルパーを追加します ハンドルバーテンプレートがコンパイルされます(Mustacheも可能です) ハンドルバーはパスをサポートしています {{this}}inブロックの使用を許可します(現在のアイテムの文字列値を出力します) Handlebars.SafeString() (そしておそらく他のいくつかの方法) ハンドルバーは2〜7 倍高速です Moustacheは反転セクションをサポートしています(つまりif !x ...) (上記に誤りがある場合は訂正してください。) 他に欠けている大きな違いはありますか?

9
ハンドルバーのインデックスでアクセス配列項目にアクセスするにはどうすればよいですか?
ハンドルバーテンプレート内の配列で項目のインデックスを指定しようとしています: { people: [ {"name":"Yehuda Katz"}, {"name":"Luke"}, {"name":"Naomi"} ] } これを使用して: <ul id="luke_should_be_here"> {{people[1].name}} </ul> 上記が不可能な場合、配列内の特定のアイテムにアクセスできるヘルパーをどのように記述すればよいですか?

6
各ヘルパーのハンドルバーでインデックスを取得するにはどうすればよいですか?
プロジェクトでテンプレートを作成するためにハンドルバーを使用しています。ハンドルバーの「各」ヘルパーの現在の反復のインデックスを取得する方法はありますか? <tbody> {{#each item}} <tr> <td><!--HOW TO GET ARRAY INDEX HERE?--></td> <td>{{this.key}}</td> <td>{{this.value}}</td> </tr> {{/each}} </tbody>

7
Handlebars.js Else If
クライアントサイドビューのレンダリングにHandlebars.jsを使用しています。Elseはうまく機能するが、ELSE IFを必要とする3つの方法の条件に遭遇した場合: これは機能しません: {{#if FriendStatus.IsFriend }} <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div> {{else if FriendStatus.FriendRequested}} <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div> {{else}} <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div> {{/if}} ELSE IFをハンドルバーで実行するにはどうすればよいですか?

8
ハンドルバー/口ひげ-オブジェクトのプロパティをループする組み込みの方法はありますか?
質問のタイトルが言うように、オブジェクトのプロパティをループする口ひげ/ハンドルバーの方法はありますか? だから var o = { bob : 'For sure', roger: 'Unknown', donkey: 'What an ass' } 私は、何かを行うことができますテンプレートエンジンに同等になります for(var prop in o) { // with say, prop a variable in the template and value the property value } ?

2
ハンドルバーの「各」ループで親のプロパティにアクセスする
次の簡略化されたデータを考えてみます。 var viewData = { itemSize: 20, items: [ 'Zimbabwe', 'dog', 'falafel' ] }; そして、ハンドルバーテンプレート: {{#each items}} <div style="font-size:{{itemSize}}px">{{this}}</div> {{/each}} eachループ内では親スコープにアクセスできないため、これは機能しません-少なくとも私が試した方法ではありません。これを行う方法があることを願っています!

3
Handlebars.jsの各ループのスコープ外の変数にアクセスする
次のように、handlebars.jsテンプレートがあります。 {{externalValue}} <select name="test"> {{#each myCollection}} <option value="{{id}}">{{title}} {{externalValue}}</option> {{/each}} </select> そして、これは生成された出力です: myExternalValue <select name="test"> <option value="1">First element </option> <option value="2">Second element </option> <option value="3">Third element </option> </select> 予想通り、のすべての要素のidおよびtitleフィールドにアクセスしてmyCollection、selectを生成できます。そして、selectの外では、externalValue変数が正しく出力されます( "myExternalValue")。 残念ながら、オプションのテキストでexternalValueは、値は出力されません。 私の質問は、ループ内からそれぞれhandlebars.jsのスコープ外の変数にアクセスするにはどうすればよいですか?


3
Ember.jsのビューとコンポーネント
私はember.jsを学習していますが、ビューとコンポーネントの違いを理解しようとしています。どちらも、再利用可能なコンポーネントを作成する方法と考えています。 エンバーのウェブサイトからの見解: Ember.jsのビューは通常、次の理由でのみ作成され ます 。- ユーザーイベントの高度な処理が必要な場合- 再利用可能なコンポーネントを作成する場合 コンポーネントに関するEmberのWebサイトから: コンポーネントは、JavaScriptを使用して動作を実装し、ハンドルバーテンプレートを使用して外観を記述するカスタムHTMLタグです。アプリケーションのテンプレートを簡略化できる再利用可能なコントロールを作成できます。 では、ビューとコンポーネントの主な違いは何ですか?また、コンポーネントよりもビューを使用したい、またはその逆の一般的な例は何ですか?

3
エスケープせずにハンドルバーテンプレートにHTMLを挿入する
今後の文字列でタグをエスケープせずに、htmlタグ付きの文字列をハンドルバーテンプレートに挿入する方法はありますか? template.js: <p>{{content}}</p> テンプレートを使用する HBS.template({content: "<i>test</i> 123"}) 実際の結果: <p><i>test</i> 123</p> 期待される結果: <p><i>test</i> 123</p>


8
部分的なハンドルバーを介して変数を渡す
私は現在、express.jsアプリケーションでhandlebars.jsを扱っています。モジュール化を維持するために、すべてのテンプレートをパーシャルに分割しました。 私の問題:部分的な呼び出しで変数を渡す方法が見つかりませんでした。次のようなパーシャルがあるとしましょう: <div id=myPartial> <h1>Headline<h1> <p>Lorem ipsum</p> </div> このパーシャルを「myPartial」という名前で登録したとしましょう。別のテンプレートでは、次のように言うことができます: <section> {{> myPartial}} </section> これは正常に機能し、パーシャルは期待どおりにレンダリングされ、私は幸せな開発者です。しかし、今必要なのは、この呼び出しを通じてさまざまな変数を渡し、たとえば、見出しが指定されているかどうかをパーシャル内でチェックする方法です。何かのようなもの: <div id=myPartial> {{#if headline}} <h1>{{headline}}</h1> {{/if}} <p>Lorem Ipsum</p> </div> そして、呼び出しは次のようになります。 <section> {{> myPartial|'headline':'Headline'}} </section> とか、ぐらい。 テンプレートをレンダリングする前に、必要なすべてのデータを定義できることはわかっています。しかし、私は説明したようにそれを行う方法が必要です。可能な方法はありますか?

5
handlerbars.jsリストが空かどうかを確認します
Handlebars.jsテンプレートで、リストまたはコレクションを繰り返し処理する前に、コレクションまたはリストがnullまたは空かどうかを確認する方法はありますか? // if list is empty do some rendering ... otherwise do the normal {{#list items}} {{/list}} {{#each items}} {{/each}}

10
AngularJsアプリを作成するときのJadeまたはHandlebarの使用方法
私はjavascriptのフルスタックアプリケーション全体に新しい(しっとり)ので、Angularにはまったく新しいので、誰かがここで直接記録を付けてくれることを望んでいました。 AngularJSを使用してクライアント側のアプリを作成するときに、JadeやHandlebarsなどのテンプレートフレームワークを使用する必要があるのはなぜですか。 私はこれらのテンプレートフレームワークのいずれも使用したことがないことを言っておく必要があります。だから私はその利点に完全に精通していません。しかし、たとえばハンドルバーを見ると、ループなど、Angularで行うのと同じことの多くを実行します。 私の知る限り、Angularで適切なHTMLを使用してテンプレートを作成し、すべてのテンプレートクライアント側を実行し、これを、たとえばノードやmongoを使用するAPIの最初のアプローチと組み合わせるのが最も理にかなっています。 この混乱の理由は、GitHubで見つけた例の多くがJadeを使用しており、私には直観に反しているように見えるためです。 私を啓発して、私をまっすぐにしてください。私が知っている以上のことを知っている人からいくつかのベストプラクティスを学びたいです。 ありがとう

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.