Metoer API Templates

當(dāng)您在應(yīng)用程序的HTML文件中將模板寫為<template name =“foo”> ... </ template>時,Meteor會生成一個名為Template.foo的“模板對象”。請注意,模板名稱不能包含連字符和其他特殊字符。

同一個模板可能會在頁面上出現(xiàn)多次,這些事件被稱為模板實例。 模板實例具有被創(chuàng)建的生命周期,放入文檔中,然后從文檔中取出并銷毀。 流星為您管理這些階段,包括確定模板實例何時被移除或替換,應(yīng)該清理。 您可以將數(shù)據(jù)與模板實例相關(guān)聯(lián),并且可以在文檔中訪問其DOM節(jié)點。

閱讀關(guān)于模板的更多信息,以及如何在“指南”中的Spacebars和Blaze文章中使用它們。

為此模板指定事件處理程序。

事件處理程序與此模板關(guān)聯(lián)。

為此模板的實例聲明事件處理程序。 多個調(diào)用除了現(xiàn)有的調(diào)用之外,還添加了新的事件處理程序。

有關(guān)事件地圖格式的詳細說明以及Meteor中事件處理的工作方式,請參閱“事件地圖”。

為此模板的實例聲明事件處理程序。 多個調(diào)用除了現(xiàn)有的調(diào)用之外,還添加了新的事件處理程序。

指定該模板可用的模板助手。

助手字典按名稱功能。

每個模板都有一個可用的助手本地字典,這個調(diào)用指定助手添加到模板的字典中。

現(xiàn)在,您可以在由<template name =“myTemplate”>定義的模板中使用{{foo}}來調(diào)用此幫助器。

助手可以接受位置和關(guān)鍵字參數(shù):

然后你可以像這樣從模板中調(diào)用這個幫助器:

在引擎蓋下,每個助手啟動一個新的Tracker.autorun。 當(dāng)被動依賴關(guān)系發(fā)生變化時,幫助者將重新運行。 助手依賴于他們的數(shù)據(jù)上下文,傳遞的參數(shù)和其他在執(zhí)行過程中被訪問的被動數(shù)據(jù)源。

要創(chuàng)建可以在任何模板中使用的幫助器,請使用Template.registerHelper。

當(dāng)這個模板的一個實例被插入到DOM中時,注冊一個被調(diào)用的函數(shù)。

作為回調(diào)添加的功能。

當(dāng)Template.myTemplate的一個實例被渲染成DOM節(jié)點并且第一次被放入文檔時,被調(diào)用的方法被調(diào)用一次。

在回調(diào)的主體中,這是一個模板實例對象,對于此模板的出現(xiàn)是唯一的,并在重新呈現(xiàn)中保持不變。 使用onCreated和onDestroyed回調(diào)對對象執(zhí)行初始化或清理。

由于你的模板已經(jīng)被渲染,你可以使用像this.findAll這樣的函數(shù)來查看它的DOM節(jié)點。

在第一次渲染模板之后,這可能是一個很好的應(yīng)用所需的DOM操作的地方。

注冊一個函數(shù),當(dāng)這個模板的一個實例被創(chuàng)建時被調(diào)用。

作為回調(diào)添加的功能。

在第一次評估模板邏輯之前調(diào)用此方法添加的回調(diào)函數(shù)。 在回調(diào)中,這是新的模板實例對象。 你在這個對象上設(shè)置的屬性將從onRendered和onDestroyed方法和事件處理函數(shù)中添加的回調(diào)中可見。

這些回調(diào)觸發(fā)一次,是第一批回火。 處理創(chuàng)建的事件是設(shè)置模板實例上使用Template.instance()從模板助手讀取的值的有用方法。

注冊一個函數(shù),當(dāng)這個模板的一個實例從DOM中被移除并被銷毀時被調(diào)用。

當(dāng)由于某種原因從頁面中取出模板時,調(diào)用這些回調(diào),而不是用重新渲染替換。 在回調(diào)中,這是被銷毀的模板實例對象。

這組回調(diào)對于清除或撤消創(chuàng)建或呈現(xiàn)的組的任何外部效果是最有用的。 這個小組發(fā)射一次,是最后一次發(fā)射。

模板實例對象表示文檔中模板的出現(xiàn)。 它可以被用來訪問DOM,并且可以在模板被動地更新時為其分配屬性。

模板實例對象作為onCreated,onRendered和onDestroyed模板回調(diào)中的值以及事件處理程序的參數(shù)。 您可以使用Template.instance()從助手訪問當(dāng)前的模板實例。

除了下面描述的屬性和功能之外,還可以將選擇的其他屬性分配給對象。 使用onCreated和onDestroyed方法添加對對象執(zhí)行初始化或清理的回調(diào)。

您只能從onRendered回調(diào)和事件處理程序(而不是從onCreated和onDestroyed)訪問findAll,find,firstNode和lastNode,因為它們需要模板實例在DOM中。

在此模板實例中查找匹配選擇器的所有元素。

CSS選擇器匹配范圍到模板內(nèi)容。

template.findAll返回匹配選擇器的DOM元素數(shù)組。

在此模板實例中查找與選擇器匹配的所有元素,并將其作為JQuery對象返回。

模板。$返回這些相同元素的jQuery對象。?jQuery對象類似于數(shù)組,其他方法由jQuery庫定義。

模板實例充當(dāng)選擇器的文檔根目錄。 只有模板及其子模板中的元素才能匹配選擇器的各個部分。

在此模板實例中找到一個匹配選擇器的元素。

CSS選擇器匹配范圍到模板內(nèi)容。

返回一個匹配選擇器的DOM元素,如果沒有這樣的元素,則返回null。

模板實例充當(dāng)選擇器的文檔根目錄。 只有模板及其子模板中的元素才能匹配選擇器的各個部分。

他是這個模板實例中的第一個頂級DOM節(jié)點。

firstNode和lastNode這兩個節(jié)點表示DOM中渲染模板的范圍。 呈現(xiàn)的模板包括這些節(jié)點,其間的兄弟姐妹,以及他們的后代。 這兩個節(jié)點是兄弟姐妹(它們具有相同的父節(jié)點),并且lastNode在firstNode之后,否則它們是相同的節(jié)點。

此屬性提供對模板頂級數(shù)據(jù)上下文的訪問。 每次模板重新渲染時都會更新。 訪問是只讀的,并且是非響應(yīng)的。

Tracker.autorun的版本在模板銷毀時停止。

您可以使用onCreated或onRendered回調(diào)函數(shù)中的this.autorun來反應(yīng)性地更新DOM或模板實例。 您可以在此回調(diào)中使用Template.currentData()來訪問模板實例的反應(yīng)數(shù)據(jù)上下文。 當(dāng)模板被破壞時,計算會自動停止。

template.view.autorun的別名。

當(dāng)模板被銷毀時停止的Meteor.subscribe版本。

您可以使用onCreated回調(diào)中的this.subscribe來指定此模板依賴哪些數(shù)據(jù)發(fā)布。 訂閱在模板銷毀時自動停止。

有一個補充函數(shù)Template.instance()。subscriptionsReady(),當(dāng)使用this.subscribe調(diào)用的所有訂閱都準備就緒時,它將返回true。

在模板的HTML內(nèi)部,您可以使用內(nèi)置的幫助器Template.subscriptionsReady,這是一個簡單的模式,用于在模板中顯示加載指示器,這些模板依賴于從訂閱加載的數(shù)據(jù)。

訂閱取決于數(shù)據(jù)上下文的另一個示例:

另一個例子,你想在訂閱完成時初始化一個插件:

用于此模板調(diào)用的View對象。

定義可以從所有模板使用的幫助函數(shù)

您正在定義的幫助函數(shù)的名稱。

模板實例對應(yīng)于當(dāng)前的模板助手,事件處理程序,回調(diào)或自動運行。 如果沒有,則為null。

在onCreated,onRendered或onDestroyed回調(diào)中,返回模板的數(shù)據(jù)上下文。

在事件處理程序內(nèi)部,返回定義了該事件處理程序的模板的數(shù)據(jù)上下文。

在助手內(nèi)部,返回使用助手的DOM節(jié)點的數(shù)據(jù)上下文。

建立對結(jié)果的反應(yīng)依賴。

訪問包含當(dāng)前數(shù)據(jù)上下文的其他數(shù)據(jù)上下文。

超出當(dāng)前數(shù)據(jù)上下文的級別數(shù)目。 默認為1。

例如,Template.parentData(0)等同于Template.currentData()。Template.parentData(2)相當(dāng)于模板中的{{../ ..}}。

表示您的<body>標(biāo)記的模板對象。

您可以在Template.body上定義助手和事件映射,就像在任何Template.myTemplate對象上一樣。

Template.body上的Helpers只在你的應(yīng)用程序的<body>標(biāo)簽中可用。要注冊全局幫助器,請使用Template.registerHelper。Template.body上的事件映射不適用于通過Blaze.render,jQuery或DOM API添加到body中的元素,也不適用于body元素本身。要處理正文,窗口或文檔上的事件,請使用jQuery或DOM API。

選擇一個模板,按名稱動態(tài)添加。

要包含的模板的名稱。

可選的。 包含模板的數(shù)據(jù)上下文。

Template.dynamic允許您按名稱包含一個模板,其名稱可以由幫助程序計算,并且可以被動地改變。data參數(shù)是可選的,如果省略,則使用當(dāng)前的數(shù)據(jù)上下文。也可以使用Template.dynamic作為塊助手({{#Template.dynamic}} ... {{/Template.dynamic}})

例如,如果有一個名為“foo”的模板,{{> Template.dynamic template =“foo”}}相當(dāng)于{{> foo}}和{{Template.dynamic template =“foo”}}。.. {{/Template.dynamic}}相當(dāng)于{{#foo}} ... {{/ foo}}。

事件映射是屬性指定要處理的一組事件的對象,值是這些事件的處理程序。 該物業(yè)可以是以下幾種形式之一:

事件類型

匹配事件的類型,如“點擊”,用正斜杠分隔,如'touchend / mouseup / keyup'。

事件類型選擇器

匹配一個特定類型的事件,但只有當(dāng)它出現(xiàn)在匹配某個CSS選擇器的元素上時。

事件1,事件2

要使用相同的函數(shù)處理多個事件/選擇器,請使用逗號分隔的列表。

處理程序函數(shù)接收兩個參數(shù):event,一個包含有關(guān)事件信息的對象,以及一個模板的模板實例,其中定義了處理程序的模板實例。 處理程序還會在其中接收一些額外的上下文數(shù)據(jù),具體取決于處理事件的當(dāng)前元素的上下文。 在模板中,元素的上下文是元素出現(xiàn)的數(shù)據(jù)上下文,由塊助手(例如#with和#each)設(shè)置。

大多數(shù)事件都會從文檔樹的原始元素中冒出來。 例如,即使點擊來源于段落內(nèi)的鏈接,跨度或其他元素,“點擊p”也會在段落中的任意位置捕獲點擊。 事件的原始元素可用作目標(biāo)屬性,而匹配選擇器并正在處理它的元素稱為currentTarget。

如果選擇器匹配事件冒泡的多個元素,則會多次調(diào)用它,例如在“點擊div”或“click *”的情況下。 如果沒有給出選擇器,處理器將只在原始目標(biāo)元素上被調(diào)用一次。

傳遞給處理程序的事件對象上有以下屬性和方法:

typeString

事件的類型,如“點擊”,“模糊”或“按鍵”。

targetDOM元素

發(fā)起事件的元素。

currentTargetDOM元素

當(dāng)前處理事件的元素。 這是匹配事件映射中選擇器的元素。 對于泡沫的事件,它可能是目標(biāo)或目標(biāo)的祖先,其價值隨著事件的發(fā)生而變化。

哪個數(shù)字

對于鼠標(biāo)事件,鼠標(biāo)按鈕的數(shù)量(1 =左,2 =中,3 =右)。對于關(guān)鍵事件,字符或鍵碼。

stopPropagation()

防止事件傳播(冒泡)到其他元素。匹配相同元素的其他事件處理程序在這個和其他事件映射中仍然被觸發(fā)。

stopImmediatePropagation()

防止在此事件上運行所有其他事件處理程序,包括此事件映射中的其他處理程序,冒泡到達的處理程序以及其他事件映射中的處理程序。

preventDefault()方法

阻止瀏覽器通常采取的響應(yīng)此事件的操作,例如,鏈接或提交表單。更多的處理程序仍然被調(diào)用,但不能扭轉(zhuǎn)效應(yīng)。

isPropagationStopped()

返回是否為此事件調(diào)用了stopPropagation()。

isImmediatePropagationStopped()

返回是否為此事件調(diào)用了stopImmediatePropagation()。

isDefaultPrevented()

返回是否已為此事件調(diào)用preventDefault()。

從處理程序返回false與在事件中調(diào)用stopImmediatePropagation和preventDefault相同。

事件類型及其用途包括:

點擊

鼠標(biāo)點擊任何元素,包括鏈接,按鈕,窗體控件或div。 使用preventDefault()來防止被點擊的鏈接被跟蹤。 一些從鍵盤上激活元素的方法也會點擊。

DBLCLICK

雙擊。

重點,模糊

文本輸入字段或其他表單控件獲得或失去焦點。 您可以通過為其提供tabindex屬性來使任何元素可以聚焦。 瀏覽器在鏈接,復(fù)選框和單選按鈕是否可以本地調(diào)整方面有所不同。 這些事件不會冒泡。

更改

復(fù)選框或單選按鈕改變狀態(tài)。 對于文本字段,使用模糊或按鍵事件來響應(yīng)更改。

mouseenter,mouseleave

指針進入或離開元素的邊界。 這些事件不會冒泡。

mousedown,mouseup

鼠標(biāo)按鈕是新的向下或向上。

keydown,按鍵,鍵盤

用戶按下鍵盤鍵。?keypress對于捕獲文本字段中的鍵入非常有用,而keydown和keyup可以用于箭頭鍵或修飾鍵。

其他的DOM事件也可以使用,但是對于上面的事件,Meteor需要注意確保它們在所有的瀏覽器中都是一致的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容