当您在应用程序的HTML文件中将模板写为<template name =“foo”> ... </ template>时,Meteor会生成一个名为Template.foo的“模板对象”。请注意,模板名称不能包含连字符和其他特殊字符。
同一个模板可能会在页面上出现多次,这些事件被称为模板实例。 模板实例具有被创建的生命周期,放入文档中,然后从文档中取出并销毁。 流星为您管理这些阶段,包括确定模板实例何时被移除或替换,应该清理。 您可以将数据与模板实例相关联,并且可以在文档中访问其DOM节点。
阅读关于模板的更多信息,以及如何在“指南”中的Spacebars和Blaze文章中使用它们。
为此模板指定事件处理程序。
事件处理程序与此模板关联。
为此模板的实例声明事件处理程序。 多个调用除了现有的调用之外,还添加了新的事件处理程序。
有关事件地图格式的详细说明以及Meteor中事件处理的工作方式,请参阅“事件地图”。
为此模板的实例声明事件处理程序。 多个调用除了现有的调用之外,还添加了新的事件处理程序。
指定该模板可用的模板助手。
助手字典按名称功能。
每个模板都有一个可用的助手本地字典,这个调用指定助手添加到模板的字典中。
现在,您可以在由<template name =“myTemplate”>定义的模板中使用{{foo}}来调用此帮助器。
助手可以接受位置和关键字参数:
然后你可以像这样从模板中调用这个帮助器:
在引擎盖下,每个助手启动一个新的Tracker.autorun。 当被动依赖关系发生变化时,帮助者将重新运行。 助手依赖于他们的数据上下文,传递的参数和其他在执行过程中被访问的被动数据源。
要创建可以在任何模板中使用的帮助器,请使用Template.registerHelper。
当这个模板的一个实例被插入到DOM中时,注册一个被调用的函数。
作为回调添加的功能。
当Template.myTemplate的一个实例被渲染成DOM节点并且第一次被放入文档时,被调用的方法被调用一次。
在回调的主体中,这是一个模板实例对象,对于此模板的出现是唯一的,并在重新呈现中保持不变。 使用onCreated和onDestroyed回调对对象执行初始化或清理。
由于你的模板已经被渲染,你可以使用像this.findAll这样的函数来查看它的DOM节点。
在第一次渲染模板之后,这可能是一个很好的应用所需的DOM操作的地方。
注册一个函数,当这个模板的一个实例被创建时被调用。
作为回调添加的功能。
在第一次评估模板逻辑之前调用此方法添加的回调函数。 在回调中,这是新的模板实例对象。 你在这个对象上设置的属性将从onRendered和onDestroyed方法和事件处理函数中添加的回调中可见。
这些回调触发一次,是第一批回火。 处理创建的事件是设置模板实例上使用Template.instance()从模板助手读取的值的有用方法。
注册一个函数,当这个模板的一个实例从DOM中被移除并被销毁时被调用。
当由于某种原因从页面中取出模板时,调用这些回调,而不是用重新渲染替换。 在回调中,这是被销毁的模板实例对象。
这组回调对于清除或撤消创建或呈现的组的任何外部效果是最有用的。 这个小组发射一次,是最后一次发射。
模板实例对象表示文档中模板的出现。 它可以被用来访问DOM,并且可以在模板被动地更新时为其分配属性。
模板实例对象作为onCreated,onRendered和onDestroyed模板回调中的值以及事件处理程序的参数。 您可以使用Template.instance()从助手访问当前的模板实例。
除了下面描述的属性和功能之外,还可以将选择的其他属性分配给对象。 使用onCreated和onDestroyed方法添加对对象执行初始化或清理的回调。
您只能从onRendered回调和事件处理程序(而不是从onCreated和onDestroyed)访问findAll,find,firstNode和lastNode,因为它们需要模板实例在DOM中。
在此模板实例中查找匹配选择器的所有元素。
CSS选择器匹配范围到模板内容。
template.findAll返回匹配选择器的DOM元素数组。
在此模板实例中查找与选择器匹配的所有元素,并将其作为JQuery对象返回。
模板。$返回这些相同元素的jQuery对象。 jQuery对象类似于数组,其他方法由jQuery库定义。
模板实例充当选择器的文档根目录。 只有模板及其子模板中的元素才能匹配选择器的各个部分。
在此模板实例中找到一个匹配选择器的元素。
CSS选择器匹配范围到模板内容。
返回一个匹配选择器的DOM元素,如果没有这样的元素,则返回null。
模板实例充当选择器的文档根目录。 只有模板及其子模板中的元素才能匹配选择器的各个部分。
他是这个模板实例中的第一个顶级DOM节点。
firstNode和lastNode这两个节点表示DOM中渲染模板的范围。 呈现的模板包括这些节点,其间的兄弟姐妹,以及他们的后代。 这两个节点是兄弟姐妹(它们具有相同的父节点),并且lastNode在firstNode之后,否则它们是相同的节点。
此属性提供对模板顶级数据上下文的访问。 每次模板重新渲染时都会更新。 访问是只读的,并且是非响应的。
Tracker.autorun的版本在模板销毁时停止。
您可以使用onCreated或onRendered回调函数中的this.autorun来反应性地更新DOM或模板实例。 您可以在此回调中使用Template.currentData()来访问模板实例的反应数据上下文。 当模板被破坏时,计算会自动停止。
template.view.autorun的别名。
当模板被销毁时停止的Meteor.subscribe版本。
您可以使用onCreated回调中的this.subscribe来指定此模板依赖哪些数据发布。 订阅在模板销毁时自动停止。
有一个补充函数Template.instance()。subscriptionsReady(),当使用this.subscribe调用的所有订阅都准备就绪时,它将返回true。
在模板的HTML内部,您可以使用内置的帮助器Template.subscriptionsReady,这是一个简单的模式,用于在模板中显示加载指示器,这些模板依赖于从订阅加载的数据。
订阅取决于数据上下文的另一个示例:
另一个例子,你想在订阅完成时初始化一个插件:
用于此模板调用的View对象。
定义可以从所有模板使用的帮助函数
您正在定义的帮助函数的名称。
模板实例对应于当前的模板助手,事件处理程序,回调或自动运行。 如果没有,则为null。
在onCreated,onRendered或onDestroyed回调中,返回模板的数据上下文。
在事件处理程序内部,返回定义了该事件处理程序的模板的数据上下文。
在助手内部,返回使用助手的DOM节点的数据上下文。
建立对结果的反应依赖。
访问包含当前数据上下文的其他数据上下文。
超出当前数据上下文的级别数目。 默认为1。
例如,Template.parentData(0)等同于Template.currentData()。Template.parentData(2)相当于模板中的{{../ ..}}。
表示您的<body>标记的模板对象。
您可以在Template.body上定义助手和事件映射,就像在任何Template.myTemplate对象上一样。
Template.body上的Helpers只在你的应用程序的<body>标签中可用。要注册全局帮助器,请使用Template.registerHelper。Template.body上的事件映射不适用于通过Blaze.render,jQuery或DOM API添加到body中的元素,也不适用于body元素本身。要处理正文,窗口或文档上的事件,请使用jQuery或DOM API。
选择一个模板,按名称动态添加。
要包含的模板的名称。
可选的。 包含模板的数据上下文。
Template.dynamic允许您按名称包含一个模板,其名称可以由帮助程序计算,并且可以被动地改变。data参数是可选的,如果省略,则使用当前的数据上下文。也可以使用Template.dynamic作为块助手({{#Template.dynamic}} ... {{/Template.dynamic}})
例如,如果有一个名为“foo”的模板,{{> Template.dynamic template =“foo”}}相当于{{> foo}}和{{Template.dynamic template =“foo”}}。.. {{/Template.dynamic}}相当于{{#foo}} ... {{/ foo}}。
事件映射是属性指定要处理的一组事件的对象,值是这些事件的处理程序。 该物业可以是以下几种形式之一:
事件类型
匹配事件的类型,如“点击”,用正斜杠分隔,如'touchend / mouseup / keyup'。
事件类型选择器
匹配一个特定类型的事件,但只有当它出现在匹配某个CSS选择器的元素上时。
事件1,事件2
要使用相同的函数处理多个事件/选择器,请使用逗号分隔的列表。
处理程序函数接收两个参数:event,一个包含有关事件信息的对象,以及一个模板的模板实例,其中定义了处理程序的模板实例。 处理程序还会在其中接收一些额外的上下文数据,具体取决于处理事件的当前元素的上下文。 在模板中,元素的上下文是元素出现的数据上下文,由块助手(例如#with和#each)设置。
大多数事件都会从文档树的原始元素中冒出来。 例如,即使点击来源于段落内的链接,跨度或其他元素,“点击p”也会在段落中的任意位置捕获点击。 事件的原始元素可用作目标属性,而匹配选择器并正在处理它的元素称为currentTarget。
如果选择器匹配事件冒泡的多个元素,则会多次调用它,例如在“点击div”或“click *”的情况下。 如果没有给出选择器,处理器将只在原始目标元素上被调用一次。
传递给处理程序的事件对象上有以下属性和方法:
typeString
事件的类型,如“点击”,“模糊”或“按键”。
targetDOM元素
发起事件的元素。
currentTargetDOM元素
当前处理事件的元素。 这是匹配事件映射中选择器的元素。 对于泡沫的事件,它可能是目标或目标的祖先,其价值随着事件的发生而变化。
哪个数字
对于鼠标事件,鼠标按钮的数量(1 =左,2 =中,3 =右)。对于关键事件,字符或键码。
stopPropagation()
防止事件传播(冒泡)到其他元素。匹配相同元素的其他事件处理程序在这个和其他事件映射中仍然被触发。
stopImmediatePropagation()
防止在此事件上运行所有其他事件处理程序,包括此事件映射中的其他处理程序,冒泡到达的处理程序以及其他事件映射中的处理程序。
preventDefault()方法
阻止浏览器通常采取的响应此事件的操作,例如,链接或提交表单。更多的处理程序仍然被调用,但不能扭转效应。
isPropagationStopped()
返回是否为此事件调用了stopPropagation()。
isImmediatePropagationStopped()
返回是否为此事件调用了stopImmediatePropagation()。
isDefaultPrevented()
返回是否已为此事件调用preventDefault()。
从处理程序返回false与在事件中调用stopImmediatePropagation和preventDefault相同。
事件类型及其用途包括:
点击
鼠标点击任何元素,包括链接,按钮,窗体控件或div。 使用preventDefault()来防止被点击的链接被跟踪。 一些从键盘上激活元素的方法也会点击。
DBLCLICK
双击。
重点,模糊
文本输入字段或其他表单控件获得或失去焦点。 您可以通过为其提供tabindex属性来使任何元素可以聚焦。 浏览器在链接,复选框和单选按钮是否可以本地调整方面有所不同。 这些事件不会冒泡。
更改
复选框或单选按钮改变状态。 对于文本字段,使用模糊或按键事件来响应更改。
mouseenter,mouseleave
指针进入或离开元素的边界。 这些事件不会冒泡。
mousedown,mouseup
鼠标按钮是新的向下或向上。
keydown,按键,键盘
用户按下键盘键。 keypress对于捕获文本字段中的键入非常有用,而keydown和keyup可以用于箭头键或修饰键。
其他的DOM事件也可以使用,但是对于上面的事件,Meteor需要注意确保它们在所有的浏览器中都是一致的。
网友评论