2

Google Closureコードで、CSSクラスの名前を示す列挙型を作成し、この列挙型を大豆テンプレートで使用したいと考えています。

/**
 * Lists a single widget.
 * @param widget The widget to be listed.
 */
{template .singleWidgetListing}
<div class='{app.ui.ClassNames.WIDGET_LISTING}'>
  <span class='{app.ui.ClassNames.WIDGET_LISTING_ITEM}'>{$widget.title}</span>
</div>
{/template}

goog.require('app.ui.ClassNames');大豆テンプレートファイルの先頭で試してみましたが、役に立ちませんでした。これを行うための標準的な方法は何ですか？

4

2 に答える 2

2

推奨されるアプローチは、Closure Templates でグローバルを参照しないことです。

注:どうしても必要な場合を除き、レンダリング時のグローバルは使用しないでください。テンプレートとランタイム環境が密結合するためです。

代わりにテンプレート パラメータを使用する必要があります。

{namespace myapp}

/**
 * Lists a single widget.
 * @param widget The widget to be listed.
 * @param classNames Map of CSS classes for styling widgets.
 */
{template .singleWidgetListing}
  <div class="{$classNames.WIDGET_LISTING}">
    <span class="{$classNames.WIDGET_LISTING_ITEM}">{$widget.title}</span>
  </div>
{/template}

テンプレートは、次のように JavaScript から呼び出されます。

myapp.singleWidgetListing(
    {widget: myWidgetInstance, classNames: app.ui.ClassNames});

JavaScript でクロージャ テンプレートを使用する を参照してください。

于 2012-07-22T20:53:30.797 に答える
0

また、CSS クラスのマップを最上位のテンプレートに注入データ ( https://developers.google.com/closure/templates/docs/concepts#injecteddata ) として渡すことを検討してください。それを必要とするサブテンプレートに。

于 2013-08-25T21:42:14.887 に答える