Question

在我的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');无济于事。这样做的标准方法是什么？

Answer 1

建议的方法是避免在Closure模板中引用globals：

注意：除非绝对必要，否则请避免使用渲染时全局变量，因为它会使模板与运行时环境之间产生紧密耦合。

应该使用模板参数：

{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});

请参阅 Using Closure Templates in JavaScript 。

Answer 2

另外，请考虑将CSS类的映射作为注入数据（https://developers.google.com/closure/templates/docs/concepts#injecteddata）传递到顶级模板中，这样您就不必将其传递给需要它的子模板。

如何在大豆模板中加载依赖项？

2 个答案: