ハンドルバー

https://stackoverflow.com/questions/7344132

27-10-2019
|

質問

PHP-Backend、Backbone.js、およびHandleBars.jsを使用しています。私のJavaScriptはデータを要求し、JSONデータは正常に返されます（json_encode）。

このJSONデータをハンドルバーテンプレートに提供すると、表示されていません。私は、JSONオブジェクトの前後の正方形の括弧がHandleBars.jsによって「嫌われている」ものであり、表示されていないことに気付きました。以下のコードをご覧ください。

var ArticleListView = Backbone.View.extend(
{
  el: $('#main'),
  render: function()
  {
    var template = Handlebars.compile($("#articles_hb").html());
    $(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}]));
    return this;    
  }
});

さて、ブラケットを取り出すと、正常に機能します。どうしたの？そもそも四角い括弧があるのはなぜですか？どうすればそれらを取り除くことができますか？

解決

ハンドルバーコンテキストをテンプレート値の単純なルックアップテーブルとして使用するため、コンテキストのオブジェクトが必要です。したがって、オブジェクトを渡す必要があります（{ ... }）に template(), 、配列ではありません（[ ... ]).

誰かがあなたに必要なコンテキストオブジェクトを含む1つの要素配列を提供します。 JSONを生成しているPHPを修正して、ArrayラッパーなしでJSSONIFIEDオブジェクト（PHP用語で連想配列）を送信するか、次のようなものでクライアントコードの配列をオフにします。

$(this.el).html(template(context[0]));

このリテラルコードがある場合：

$(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}]));

JavaScriptファイルでは、そのコードを生成して修正するものが必要です。バックボーンビューに埋め込まれているような文字通りのデータがある場合、おそらくバックボーンを正しく使用していない可能性があります。テンプレートのデータは、おそらくバックボーンモデルから来るはずです。

バックボーンモデルからそのjsonを取得している場合、私はあなたが呼んでいると思います toJSON 単一のモデルではなく、コレクション（配列を返す）で toJSON JavaScriptオブジェクトを提供する必要があります。

他のヒント

コレクションの出力をループするためにハンドルバーを呼び出すことは完全に合理的です。また、アレイは、ビューでのデータ処理のための悪い設計上の決定ではありません。

ハンドルバーには、数値またはシンボル識別子を扱うための特別な構文があります。ここで説明するように. 。したがって、より正しい答えは、ハンドルバーが次のようなテンプレートの配列にアクセスできるということです。

{{people.attributes.[0]}} // akin to people.attributes[0]
{{people.attributes.[1]}} // akin to people.attributes[1]

入力：メール：[{headers：{subject：["hello darling"、 "... another"]}}、... more

<ul>
  {{#each mails}}
    <li>.
        {{headers.subject.[0]}}
    </li>
  {{/each}}
</ul>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow