javascript - ハンドルバー テンプレートで使用可能なすべての変数を表示する方法

Question

私は最初の Ember.js アプリに取り組んでおり、すべてのドットを接続するのに問題があります。特定のハンドルバー テンプレート内で使用可能なすべての変数を確認できれば、非常に役立ちます。

関連する質問がありますが、それを使用するにはスコープ内の変数を知っている必要があります: How do I add console.log() JavaScript logic inside of a Handlebars template?

すべての変数を出力するにはどうすればよいですか?

Answer 1

適切なオプションは、Handlebars ヘルパーを使用してテンプレート内の「this」の値をデバッグすることです: 1.

{{#each}}
    {{log this}}    
{{/each}}

または、2. @watson の提案に類似

{{#each}}
    {{debugger}}
{{/each}}

次に、Dev Tools で「this」のローカル スコープ変数にドリルインします。

あるいは、3. 次のように、コントローラーの init メソッド内から直接ログを記録することもできます。

App.UsersController = Ember.ArrayController.extend({
    init: function() {
        console.log(this);
        console.log(this.getProperties('.'));
    }
});

Answer 2

テンプレート内の変数を本当にダンプする必要がある場合は、テンプレート AST を調べて、関連するノードの内容を出力できます (コンパイラソースを参照してください)。これは簡単な作業ではありません。試行錯誤を繰り返す必要があり、コードは非常に低レベルであり、コメントもそれほど多くありません。

Handlerbars には、あなたが求めていることへのショートカットがないようです。そのため、手順は次のようになります。

1. テンプレートをプリコンパイルします (コマンド ライン ソースを参照してください。関数が呼び出されていると思いますhandlebars.precompile())
2. ASTを調べる

Answer 3

テンプレート内で使用可能な変数は、テンプレートのレンダリングに使用しているモデルによってのみ制約されます。

テンプレートをレンダリングするアプリにブレークポイントを設定し、その時点でモデルに何があるかを確認する必要があります。これにより、テンプレートに配置できるものが表示されます。