Handlebars.js: テンプレートから変数のリストを取得する方法は？

作成日 2016年04月07日 · 15コメント · ソース: handlebars-lang/handlebars.js

皆さんこんにちは、

テンプレートで使用されている変数のリストを取得する方法はありますか？テンプレートに{{varName}}場合、それを知りたいのですが。テンプレートに次のようなものがある場合

{{#each listName}}
    {{field1}}
    {{field2}}
{{/each}}

テンプレートには、フィールドfield1とfield2持つオブジェクトを含むlistNameというリストが必要です。このためのAPIはありますか？

ありがとう、
ドミトリー。

ソース

dsavenko

👍12

最も参考になるコメント

このスレッドを見つけた人のために、私は含まれている変数をチェックするために素早く汚い方法を使用しました

const getHBVars = value => {
  const ast = hb.parse(value)
  let keys = {}

  for (let i in ast.body) {
    if (ast.body[i].type === 'MustacheStatement') {
        keys[ast.body[i].path.original] = true
    }
  }
  return keys
}

const activeKeys = getHBVars('Hello {{person}}! Today is {{day}}')

console.log(activeKeys)
// --> { person: true, day: true }

mulhoon 2018年06月13日

👍9

全てのコメント15件

探しているものに最も近いのは、ログヘルパーを使用して特定のコンテキスト（テンプレート変数のセット）を出力することです。

例： {{log this}} - thisオブジェクトをコンソールに出力するので、使用可能なプロパティ（および値）を確認できます。

thingsセットがあることがわかっていて、それらを具体的に出力したい場合は、代わりに{{log things}}実行できます。それは、他のブログ内でifまたはeachなどで機能します。

ドキュメントはここにあります： http ：

ErisDS 2016年04月07日

👍3

入力を検証するためにHandlebarsテンプレートからJSONスキーマのようなものを構築する方法を探していますか？それは不可能だと思います。任意のブロックヘルパーを作成できるため、ヘルパーブロック内のコンテキストが実際にどのようになるか、およびこのヘルパーに期待されるサブオブジェクトがどのように見えるかを確認することはできません。

nknapp 2016年04月07日

独自のhelperMissingヘルパーを使用してテンプレートをコンパイルして、使用済み変数の収集に役立てることができます（null入力でレンダリングする必要がある場合があります）。ただし、前のコメントで述べたように、テンプレートが異なるコンテキストに対して動作すると、異なる結果が得られる可能性があります。

zordius 2016年04月08日

答えてくれてありがとう。

はい、入力を検証するためにテンプレートからJSONスキーマのようなものを構築しようとしています。私はそれが一般的に不可能であることを知っています。しかし、私が書いた標準のヘルパーとヘルパー（ knownHelpersOnly ）のみを使用する場合、固有の克服できない問題は見られません。

私はハンドルバーがそうするための「標準的な」（低レベルではあるが）方法を提供するかもしれないと思った。たとえば、ヘルパーが入力として何を期待しているのかを世界に伝えるためのAPI、またはこのようなものです。あなたの答えから判断すると、そのような方法はありません。

これを機能リクエストと見なしてほしい:)

dsavenko 2016年04月08日

@dsavenkoテンプレートを解析して、ASTをスキャンできます。この手法は、ASTで部分ノードを検索することにより、このrequirejsプラグインに部分をプリロードするために使用されます。
https://github.com/SlexAxton/require-handlebars-plugin/blob/master/hbs.js#L224

ここにAST構造に関するドキュメントがあります：
https://github.com/wycats/handlebars.js/blob/master/docs/compiler-api.md

jbboehr 2016年04月19日

@jbboehrありがとう、これは有望に見えます！

dsavenko 2016年04月19日

@dsavenko私はこれを自分で見たいです。タイプチェックをポートに統合する方法を探していましたが、テンプレートスキーマが役立つようです。

jbboehr 2016年04月19日

これに対する解決策を見つけましたか？
これがありますが、私はそれを機能させることができませんでした：

https://github.com/stevenvachon/handlebars-html-parser

abumalick 2017年02月07日

👍1

@abumalick 、いや、私はしませんでした。 AST解析アプローチが機能する可能性があります。しかし、この機能を必要としない方法でフローを再設計する方が簡単でした。

dsavenko 2017年02月07日

このスレッドを見つけた人のために、私は含まれている変数をチェックするために素早く汚い方法を使用しました

const getHBVars = value => {
  const ast = hb.parse(value)
  let keys = {}

  for (let i in ast.body) {
    if (ast.body[i].type === 'MustacheStatement') {
        keys[ast.body[i].path.original] = true
    }
  }
  return keys
}

const activeKeys = getHBVars('Hello {{person}}! Today is {{day}}')

console.log(activeKeys)
// --> { person: true, day: true }

mulhoon 2018年06月13日

👍9

...しかし、より高速な方法は、おそらく生のコンテンツに正規表現を使用することです。