handlebars-API

hjb2722404發表於2020-12-11

(預)編譯

Handlebars.compile(template,options)


編譯一個模板以便它立即執行。
const template = Handlebars.compile("{{foo}}");
template({});

支援一系列選項來改變執行模板的方式。

  • data : 設定為false 來禁用對@data的追蹤。

  • compat:設定為true來啟用遞迴欄位查詢。

  • knownHelpers: 包含已知將在模板執行時起作用的輔助程式的雜湊值列表。傳遞這個引數允許編譯器優化許多情況。Builtin輔助程式自動包含在此列表中,可以通過將該值設定為false來省略它

  • knownHlpersOnly: 設定為true 允許編譯器根據已知的輔助程式列表進行進一步的優化。

  • noEscape : 設定為true 來避免HTML轉義任何內容。

  • strict : 在嚴格模式下執行。 在這種模式下,模板將丟擲而不是默默地忽略丟失的欄位。 這具有禁用諸如{{^ foo}} {{/ foo}}之類的逆運算的副作用,除非在源物件中明確包含欄位.

  • preventIndent: 預設情況下,縮排部分呼叫會導致整個部分的輸出縮排相同的數量。這可能導致在部分編寫預標籤時出現意外的行為。將此選項設定為true將禁用自動縮排特性。

  • ignoreStandalone: 設定為true移除獨立標籤。當設定了該選項,區塊和片段在它們自己的行上不會刪除該行上的空白。

  • explicitPartialContext:禁用區域性變數的隱式上下文。啟用時,未傳遞上下文值的分割槽將對空物件執行。

生成的模板函式可以稱為template(context,options),其中context是輸入物件。 options是可以具有以下任何屬性的物件.

  • data:傳入一個物件來定義自定義@variable私有變數.

  • helpers:除了全域性定義的輔助程式外,還要傳遞提供自定義的輔助程式。

    在模板執行期間,此物件中定義的值將替換全域性物件中定義的任何值.

  • partials : 傳入以提供除全域性定義的片段之外的自定義片段。

    在模板執行期間,此物件中定義的值將替換全域性物件中定義的任何值

  • allowCallsToHelperMissing : 如果設定為true,將允許像{{helperMissing}}{{blockHelperMissing}}這樣的呼叫。請不要認為這允許模板作者為在執行handlebars的環境中遠端執行程式碼而建立模板。

Handlebars.precompile(template, options)


預編譯給定的模板,以便可以將其傳送到客戶端並在不編譯的情況下執行。
var templateSpec = Handlebars.precompile("{{foo}}");

支援與handlebar .compile方法相同的所有選項引數。另外可以傳遞:

  • srcName:傳遞以生成輸入檔案的源對映。以這種方式執行時,返回結構是{code, map},其中程式碼包含模板定義,map包含源對映.
  • destName : 可選引數,與srcName一起使用,在生成源對映時提供目標檔名。

Handlebars.template(templateSpec)


設定用`handlebar .precompile`預編譯的模板
var template = Handlebars.template(templateSpec);
template({});

執行時

Handlebars.registerPartial(name, partial)


註冊環境中任何模板都可以訪問的模板片段。
Handlebars.registerPartial('foo',partial)

支援註冊多個模板片段

Handlebars.registerPartial({ foo: partial, bar: partial });

如果載入整個庫,這些片段可能是將被按需編譯的字串。如果僅載入執行時,這些片段則必須是已經被Handlebars.template方法設定過的預編譯模板。

Handlebars.unregisterPartial(name)


登出已經註冊過的模板片段
Handlebars.unregisterPartial("foo");

Handlebars.registerHelper(name,helper)


註冊一個可以被環境內任何模板訪問的輔助程式。
Handlebars.registerHelper("foo", function() {});

也可以一次性註冊多個輔助程式:

Handlebars.registerHelper({ foo: function() {}, bar: function() {} });

Handlebars.unregisterHelper(name)


登出之前註冊過的輔助程式
Handlebars.unregisterHelper("foo");

Handlebars.create()


建立一個獨立的`Handlebars` 環境。
var OtherHandlebars = Handlebars.create();

每個環境都有自己的輔助程式和模板片段。這僅在那些只需要一部分模板片段和輔助程式的情況下才是必要的。大多數情況下只需要直接使用根作用域的Handlebars

為給定的環境建立的模板會被繫結到該環境。這意味著那些需要在多個環境使用的模板將需要被重新編譯或者通過Handlebars.template 重構每個環境。 這也適用於模板片段。

Hanlebars.noConflict()


從全域性名稱空間中刪除此Handlebars例項,將全域性Handlebars變數恢復為其先前的值.

var myHandlebars = Handlebars.noConflict();

這允許同時使用庫的不同版本,而不必擔心版本衝突。

工具函式

輔助工具


在實現自定義幫助程式時,這些方法非常方便。

Handlebars.SafeString(string)

在模板呈現時防止字串轉義

new Handlebars.SafeString("<div>HTML Content!</div>");

在構造將被標記為安全的字串時,應該使用handlebars. escapeexpression方法正確地轉義任何外部內容,以避免潛在的安全問題。

Handlebars.escapeExpression(string)

HTML轉義傳遞的字串,使其作為HTML內容中的文字呈現是安全的。

Handlebars.Utils.escapeExpression(string);

&,<,>,",',',=替換為字串值的HTML實體等效值。SafeString值保持不變.

除三括號表示式外的所有表示式的輸出都通過此方法傳遞。helper類在通過SafeString例項返回HTML內容時也應該使用此方法,以防止可能的程式碼注入。

這個方法是Handlebars.Utils.escapeExpression 的別名。

Handlebars.createFrame(data)

塊輔助程式用於建立子資料物件。

if (options.data) {
  var data = Handlebars.createFrame(options.data);
  data.foo = "bar";
  options.data = data;
}

修改資料狀態的助手應該在這樣做時建立一個新框架,以隔離它們自己並避免破壞任何父狀態。通常,每個輔助程式執行只需要建立一個框架。例如,每個迭代器建立一個單獨的框架,該框架被所有子執行重用。

一般工具


Handlebars提供了一系列工具方法,這些方法通過Handlebars.Utils物件暴露出來。

Handlebars.Utils.isEmpty(value)

確定給定值是否為空

內建的ifwith輔助程式使用它來控制它們的執行流。Handlebars定義的“空”是:

  • 長度為0的陣列
  • 除0以外的假值。

這是為了配合 插值行為

Hanlebars.Utils.extend(obj,value)

簡單的實用程式方法來擴大obj與所有鍵的定義上的值

比如,Hanlebars.Utils.extend(foo,{bar:true})

上面的表示式將會將會為foo物件設定一個名為bar的鍵,並將值設定為`true

Handlebars.Utils.toString(obj)

一般的toString方法。

Handlebars.Utils.isArray(obj)

判斷一個物件是否是陣列

Handlebars.Utils.isFunction(obj)

判斷一個物件是否是函式。

Handlebars.log(level,message)

使用log輔助程式列印日誌

如果需要,可以被重寫

@data 變數

以下@data變數由Handlebars及其內建輔助程式實現。

@root


執行模板的初始上下文.

{{#each array}} {{@root.foo}} {{/each}}

除非顯式修改,否則此值在頁面呈現的所有部分中都是一致的,這意味著可以在深度引數無法引用父模板的片段中使用該值。

@first


在迭代的第一步中,each輔助程式將其設定為true

{{#each array}} {{#if @first}} First! {{/if}} {{/each}}

@index


當前迭代步驟的從零開始的索引。由each輔助程式設定。

{{#each array}} {{@index}} {{/each}}

@key


當前迭代步驟的鍵名。在遍歷物件時由each輔助程式設定。

{{#each array}} {{@key}} {{/each}}

@last


在迭代的最後一步中,each輔助程式將其設定為true

{{#each array}} {{#if @last}} Last :( {{/if}} {{/each}}

@level


指定的日誌級別

template({}, { data: { level: Handlebars.logger.WARN } });