[解決済み] オブジェクトデータをレンダリングするためにHandlebars.jsが必要 "[Object object]" の代わりに。
質問
Handlebarsのテンプレートを使用していますが、JSONデータはすでに[Object object]で表現されていますが、Handlebarsの外でこのデータをパースするにはどうしたらよいでしょうか?例えば、ハンドルバーズタグを通してページ上のJavaScript変数に入力しようとしているのですが、これがうまくいきません。
何か提案はありますか?ありがとうございます!
EDITです。
私は、テンプレートにExpressJSとHandlebarsを使用していることを明らかにする。 私のルートでは、次のようになります。
var user = {}
user = {'id' : 123, 'name' : 'First Name'}
res.render('index', {user : user});
そして、index.hbs テンプレートにある
{{user}}
オブジェクトがあります。 私は
{{#each}}
を使用してオブジェクトをうまく反復できます。 しかし、私はBackbonejsも使っていて、このデータをこのようなViewに渡したいのです。
myView = new myView({user : {{user}});
問題は、その
{{user}}
は単に
[Object object]
を表示するだけです。これをconsole.logに出力すると「Unexpected Identifier」というエラーが発生します。
どのように解決すればよいですか?
出力時に
{{user}}
を出力する場合、Handlebars はまず
user
's
.toString()
の値です。プレーンな
Object
の場合は
のデフォルトの結果は
"[object Object]"
が表示されます。
もっと便利なものを手に入れるには、オブジェクトの特定のプロパティを表示させるか
{{user.id}}
{{user.name}}
または、オブジェクトを別の方法でフォーマットするヘルパーを使用/定義することもできます。
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
myView = new myView({
user : {{{json user}}} // note triple brackets to disable HTML encoding
});
関連
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】JavaScriptのオブジェクトの長さ
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。