如何加载大豆模板中的依赖关系？

Question

在我的谷歌关闭的代码，我做了一个枚举表示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），以便您不必将它传递给需要它的子模板。