本文描述了使用花括号时组件调用的不同之处{{…}}
,尖括号<……>
或者一个(...)
Ember模板中的s-expression。
Ember有三个方法来调用模板中的组件和助手,这三个方法中的任何一个都可以用来调用经典的和现代的glimmer组件。
使用花括号形式的“经典”语法{{…}}
,如。
{{用户概要firstName =“丹”lastName =“F。"}}< br >
使用类似html形式的“尖括号”语法<……/>
,例如:
< UserProfile@firstName =“丹”@lastName =“f”/>
最后,在花括号和尖括号语法中使用s表达式(用于子表达式)形式来调用子组件或助手。它的形式是(concat a " " b)
,因此:
{{user-profile name=(concat firstName " " lastName)}}< br >
和
< UserProfile@一会={{concat"黏糊糊的"(如果这.isActive"是活跃的”)}}/>
尖括号
类似于区分两者的普通DOM apiJS属性来自HTML属性,尖括号组件调用有两个不同的名称空间。
您可能最熟悉的是HTML属性,它告诉浏览器如何绘制HTML元素。这些属性可以做诸如定义alt
图像上的文本< img alt = "鸟" >
或锚标记上的URL< a href = " https://example.com " >
.尖括号语法以类似的方式实现属性,允许开发人员将这些属性应用到组件模板中的某个DOM节点。
<!——父母。哈佛商学院——>
< UserProfile类=“def”@tagName = "图"/>
的属性……
语法决定了从尖括号调用传入组件的属性应该出现在组件的模板中的哪个位置。任意数量的属性和元素修饰符可以在用户配置文件组件上指定,并且它们都将应用到具有属性……
在上面。
<!——UserProfile。哈佛商学院——>
<图>
< img...属性src =“default.jpg”>
图> < /
得到的HTML输出是:
<图类=“def”>
< img类=“abc”src =“default.jpg”>
图> < /
任何前缀@
是一个“参数”,由其调用者传递给组件,支持组件的类可以访问该组件,并且可以是任何JS运行时值。属性告诉浏览器要呈现什么,参数则告诉自定义的Ember组件标记要做什么。
<!——父母。哈佛商学院——>
< UserProfile@name =“丹·f .”/>
该模板调用< UserProfile >
组件,它需要一个参数:@ name
,我们传递的值是硬编码字符串“Dan f”。
在支持组件类中,参数的命名空间在this.args
对象,它是不可变的。你可以这样访问这个参数:
/ / user-profile.js< br >这.args.name;/ /“丹·f .”< br >
为了说明两者的区别,下面是使用参数和属性的尖括号组件的调用:
< Foo@酒吧=@巴兹={{散列一个=1b =“嗨”}}类=“你好”data-fizz =“ok”/>
在上面的,酒吧
和巴兹
会是值的参数吗123
和{a: 1, b: 'hi'}
分别,而类
和data-fizz
是可以应用到组件模板中某个DOM节点的属性。
花括号和s表达式语法
Ember curly(也称为“经典”)组件调用只有一个名称空间:参数,所有的东西都被当作参数,就好像你隐式地包含了@
在每个人面前。在历史上,这是通过自动应用的值来补偿的类
参数类
属性,并且可以使用Ember经典将此行为扩展到其他属性attributeBindings
API。
<!——父母。哈佛商学院——>
{{user-profile bar=123 baz=(hash a=1 b='hi') class="hello" data-fizz="ok"}}< br >
在上面的,酒吧
,巴兹
,类
和data-fizz
所有人都会被视为参数到接收组件,等等属性……
在它的模板中将是一个no-op。在Ember经典组件中,所有这些参数都可以在后台组件类中使用参数名,<参数名称>
,或者使用这一点。<参数名称>
,因此:
/ / user-profile.js
酒吧;/ / 123
这.酒吧;/ / 123
巴兹;// {a: 1, b: 'hi'}
这.巴兹;// {a: 1, b: 'hi'}
这.类;/ / '你好'
这['data-fizz'];/ /“ok”
模板中的用法是:
<!——用户配置文件。哈佛商学院——>
{{酒吧}}< br >
{{this.bar}}< br >
{{baz}}< br >
{{this.baz}}< br >
{{this.class}}< br >
{{data-fizz}}< br >
{{this.data-fizz}}< br >
结果如下:
123< br >
123< br >
(对象)< br >
(对象)< br >
你好< br >
好吧< br >
好吧< br >
值得注意的是,Ember经典组件和glimmer组件都可以通过任何一种语法调用:经典的花括号或尖括号——重要的是如何定义后台类。因此,如果上面的示例是作为现代微光组件实现的,则支持类必须访问参数酒吧
与this.args.bar
.如果上面的例子是作为一个经典组件实现的,那么后台类必须使用其中任何一个来访问参数酒吧
或this.bar
.
缺失的是什么?
对于那些紧跟其后的人,您可能已经注意到,这在编程模型中留下了某种漏洞,因为在设置上下文组件以传入参数或以块参数输出时,没有等效的尖括号。这是我们正在讨论的话题Ember RFC问题#497.