web-dev-qa-db-ja.com

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

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

関連する質問がありますが、それを使用するには、スコープ内の変数を知っている必要があります。 ハンドルバーテンプレート内にconsole.log（）JavaScriptロジックを追加するにはどうすればよいですか？

変数をallで出力するにはどうすればよいですか？

javascriptdebuggingember.jshandlebars.js
18
doub1ejack

良いオプションは、ハンドルバーヘルパーを使用してテンプレートの「this」の値をデバッグすることです：1。

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

または、2。@watsonと同様

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

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

enter image description here

または、代わりに、次のようなコントローラーのinitメソッド内から直接ログに記録できます。

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

必ずFirebugを試してみてください。物事について別の視点が得られます。ただし、chromeを完全に放棄しないでください。ある時点で Ember Inspector が必要になります。

私は 誰もが推奨する同じデバッグヘルパー を使用していますが、これはChromeが表示する方法です。

Chrome inspector isn't very helpful

Firebugで同じオブジェクトを展開すると、探していた変数（sources []）や、Chromeにはない他の便利なプロパティなど、次の情報が表示されます。

Firefox has more for me to work with

7
doub1ejack

variablesをテンプレートに本当にダンプする必要がある場合は、テンプレートASTを調べて、関連するノード（コンパイラ sources を参照）。試行錯誤を繰り返す必要があり、コードは非常に低レベルであり、コメントはそれほど多くないため、これは簡単な作業ではありません。 。

ハンドラーバーにはあなたが求めているものへのショートカットがないようですので、手順は次のようになります：

  1. テンプレートをプリコンパイルします（ コマンドラインソース を参照してください。関数はhandlebars.precompile()と呼ばれます）
  2. aSTを探索する
1
Raffaele

サンプルのEmberアプリは、EmberObjectsを its app.js で定義します。基本的に、オブジェクトで利用できるのは、そこで定義されているプロパティです。 （たとえば、subredditにはtitleなどがあります）。

オブジェクトのプロパティスキーマをコンソールにダンプするグローバルに利用できる方法が必要な場合、1つのアプローチは、渡されたコンテキストのメンバーをウォークスルーして書き込む「デバッグ」ヘルパーを作成することです。何かのようなもの：

Handlebars.registerHelper('debug', function (emberObject) {
    if (emberObject && emberObject.contexts) {
        var out = '';

        for (var context in emberObject.contexts) {
            for (var prop in context) {
                out += prop + ": " + context[prop] + "\n"
            }
        }

        if (console && console.log) {
            console.log("Debug\n----------------\n" + out);
        }
    }
});

次に、検査したいものにそれを呼び出します。

<div>Some markup</div>{{debug}}<div>Blah</div>

これは、スコープ内のEmberObjectを使用します。そのため、リストを持つオブジェクトではなく、リスト要素を検査する場合は、{{#each}}内にポップします。

1
mcw

数年前に Barhandles を作成しました。 Handlebarsパーサーを使用してASTを生成し、そこから変数参照を抽出します。 extractSchemaメソッドは、スキーマを抽出します。そのスキーマは、JSONスキーマやJoiなどには基づいていません。これは、Handlebarsテンプレートから抽出できる可能性のあるもののほとんどを取り込む独自のフォーマットです。

したがって、このbarhandlers.extractSchema('{{foo.bar}}')は以下を生成します。

{
  "foo": {
    "_type": "object",
    "_optional": false,
    "bar": {
      "_type": "any",
      "_optional": false
    }
  }
}

{{#if expr}}はネストされた参照を自動的にオプションにすることを考慮に入れます。 {{#with expr}}構造に基づいてスコープの変更を正しく処理し、独自のカスタムディレクティブのサポートを追加することもできます。

これを使用して、テンプレートに渡したデータ構造の検証を行いましたが、その目的にはかなりうまく機能していました。

0
Wilfred Springer

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

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

0
dezman