web-dev-qa-db-ja.com

javascriptを介したハンドルバー変数へのアクセス

Express jsフレームワークのハンドルバービューを生成しています。別のJavaScriptファイル内からビューに渡す変数にアクセスする必要があります。

例えば:

var foo = {{user.name}}

誰かがアイデアを思いついた?ヘルパー?

13
PokeRwOw

user.nameの値を<script>内に含める場合は、有効なJavaScript式として出力する必要があります。これにより、値がコードとして再評価されます。

現在、たとえばuser.name"john.doe"の場合、結果のスクリプトは次のようになります。

var foo = john.doe; // `john` is treated as an object with a `doe` property

user.nameは、文字列値/リテラル​​として理解されるように、少なくとも引用符で囲む必要があります。

var foo = "{{user.name}}";
// result
var foo = "john.doe";

また、JSONとJavaScriptの構文の類似性を利用して、JavaScriptが式として理解できるJSONを出力し、すでに引用符を含めることもできます。

Handlebars.registerHelper('json', function (content) {
    return JSON.stringify(content);
});
var foo = {{{json user.name}}};
// result
var foo = "john.doe";

最後の例のトリプル{{{...}}}は、HTMLエンコーディングを無効にするため、次のようになることはありません。

var foo = &quot;john.doe&quot;
17

ノードはエンコードされたJSONをハンドルバーに渡すことができます-次のように表示します:

result.render('index', { 
  encodedJson : encodeURIComponent(JSON.stringify(jsonData))
});

Handlebars-viewは、次のようにjsonをデコードおよび解析できます。

<script>
  var decodedJson = decodeURIComponent("{{{encodedJson}}}");
  var jsonObj = JSON.parse(decodedJson);
</script>

ハンドルバービューに渡されたものはすべて基本的にHTMLに直接挿入されるため、常にエンコードされたjsonを渡して、ビューにデコードさせる必要があります。


私はこのスレッドで他の提案を試しました。しかし、彼らはエンコードされていないJSONをハンドルバービューに挿入したため、常に解析エラーが発生しました。ハンドルバーは変数をプレーンテキストとして解析するように見えるので、人々がそれをどのように機能させたかはわかりません。

ハンドルバーパーサーがどのように機能するかについてはまだ読んでいませんが、私の例で提案しているように、エンコードされたJSONを使用するのが唯一の安全なオプションのようです。

14
Drkawashima