如何加載大豆模板中的依賴關係？

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），以便您不必將它傳遞給需要它的子模板。