salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

内容预览:
  • 三目运算:下面的代码为当attribute xxx的值为xxx的情况下,这个classs...~
  • <aura:component> <aura:attribute type="String"name="sonAtt...~
  • demo以创建Lightning application为主~

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresion}展示信息。

lightning在component中解析动态值的时候,会将{!} 这个里面的变量进行动态的解析以及展示。当然这个变量可以是基础类型,自定义类型,数组集合等等,当然如果表达式为空字符串或者是空格则不会解析。偶尔特殊的要求为需要输出‘{!}’这个字符串,官方文档说可以使用<aura:text/>进行展示,因为这个标签不会将‘{!’作为头进行解析。当然,不要被这句话所欺骗,正常的理解应该为当value的值非tag或者attribute值的情况下,才会被解析成平滑的字符串。这里做个demo看一下渲染效果:

 1 <aura:component>
2 <aura:attribute name="test" type="String" default="testValue"/>
3 {!v.test}
4 <br/>
5 <aura:text value="{!v.test}"/>
6 <br/>
7 {!}
8 <br/>
9 <aura:text value="{!}"/>
10 <br/>
11 <aura:text value="{!v.test2}"/>
12 <br/>
13 <aura:text value="{!test2}"/>
14 </aura:component>

demo中分了几种情况:输出正常的attribute值、通过aura:text输出attribute值、输出{!}值、输出一个不存在的属性的值、输出一个不存在的变量的值。结果展示如下图所示。

通过结果我们可以看出来,aura:text并不是不解析{!开头的内容,而是如果{!}不包含任何表达式情况下,会默认作为文本进行输出,其实不是用aura:text 直接输出{!}也可以作为文本进行输出。如果解析的内容不存在情况下,则默认返回null。

使用{!}方式标签仅能用于在.cmp 以及.app文件中,即只能用在lightning component以及lightning application中。

表达式除了简单的通过{!v.attribute} 展示attribute的内容或者{!123}等展示字面内容的内容外,还可以使用条件表达式这种方式展示内容,通常有两种常用的方式:三目运算和使用<aura:if>。

三目运算:下面的代码为当attribute xxx的值为xxx的情况下,这个classs设置为’xxx’,否则,class为空。

<a class="{!v.xxx == 'xxx' ? 'xxx' : ''}" >test </a>

 <aura:if>:此标签通常和aura:set一起用。当aura:if判断部分为true,显示aura:if为true的逻辑,否则使用aura:set设置attribute为else,走false的逻辑。下面的例子为如果有edit权限则展示Edit的Button,否则展示’You can’t edit this’的文字。

1 <aura:attribute name="edit" type="Boolean" default="true"/>
2 <aura:if isTrue="{!v.edit}">
3 <ui:button label="Edit"/>
4 <aura:set attribute="else">
5 You can’t edit this.
6 </aura:set>
7 </aura:if>

 我们在项目中会经常用到lightning component中嵌套其他的子的lightning component情况,比如列表中包含<aura:iterator> 标签嵌套item的lightning component从而实现一个自定义列表展示。

嵌套lightning component就会涉及到attribute 赋值的部分,针对attribute赋值,可以赋值一个写死的值,比如赋值‘123’等。lightning也提供了两种动态方式赋值:{!attributeValue}以及{#attributeValue}。两者赋值区别还是很大的,具体如下:

一.   !方式:此种方式又可以理解为绑定的表达式,即对attribute的赋值非一次性的,改变会贯穿着始终。子项如果修改了这个attribute的赋值,也会影响到父中此attribute的值;同样的,如果父中对此attribute有更改,也会作用到子component中的引用上。

这里做一个例子:

1.boundSonComponent.cmp:声明一个attribute名称为sonAttribute,使用一个aura:text展示这个值,点击按钮后更新这个sonAttribute的value。

<aura:component>
<aura:attribute type="String" name="sonAttribute"/>
son attribute :
<aura:text value="{!v.sonAttribute}"/><br/>
<lightning:button onclick="{!c.handleSonClick}" label="son button"/>
</aura:component>

2.boundSonComponentController.js : 更新sonAttribute的value。

({
handleSonClick :
function(component, event, helper) {
var sonAttributeValue = 'Updated Son Attribute';
component.set(
'v.sonAttribute', sonAttributeValue);
}
})

3.boundParentComponent.cmp :声明一个attribute名称为parentAttribute,展示此attribute的值并且提供按钮可以修改值,在这个基础上引入了一个boundSonComponent,并且将parentAttribute的值传给了sonAttribute。注意,这里通过‘!’方式进行传递值。

<aura:component>
<aura:attribute name="parentAttribute" type="String" default="parentAttributeValue"/>
parentAttribute :
<aura:text value="{!v.parentAttribute}"/><br/>
<lightning:button label="parent button" onclick="{!c.handleParentClick}" /><br/>
<c:boundSonComponent sonAttribute = '{!v.parentAttribute}'/>
</aura:component>

4.boundParentComponentController.js :更新parentAttribute的value。

({
handleParentClick :
function(component, event, helper) {
component.set(
'v.parentAttribute', 'updated parent attribute');
}
})

 因为lightning无法直接运行lightning:component,所以需要将lightning:component放在 lightning app builder视图中或者放在Lightning application中,lightning app builder 可以重新定义 page layout,分为App Page, Home Page 和Record Page。这个和page layout 很像,需要注意的一点为显示在不同类型的页面需要实现不同的接口,具体可以查看上一篇内容,感兴趣的可以自己玩一玩。

demo以创建Lightning application为主。

5.创建boundApplication.app 用来包含boundParentComponent从而展示。

<aura:application>
<c:boundParentComponent/>
</aura:application>

运行lightning application可以通过developer console -> File -> Opening Lighting Resource 找到此bundle,然后Open Selected,打开后点击Preview便可以看到显示方式。

结果展示:

1.默认进来情况:因为parentAttribute的值作为了sonAttribute的值,所以二者显示相同的值。

 

 

 2.点击 parent button:点击parent button后,后台会更新parentAttribute的value。由于sonAttribute传递的值通过parentAttribute值传递,并且是通过!(bound)方式,所以当更改了parentAttribute后,sonAttribute也同样的改变成了parentAttribute的值。

 

 3. 点击son button:点击son button后,后台会更新sonAttribute的值。由于sonAttribute是通过parentAttribute值传递,并且是通过!(bound)方式,所以当更改了sonAttribute后,parentAttribute也同样的受到了改变。

 这种操作结果可能让人感到意外,因为我们有的时候只是想将attribute的值作为一个一次性初始化的值传递给子的component 的attribute,针对父或者针对子的改动并不希望后期在影响当前component外的其他的父或者子的component attribute。接下来的方式即可以做到非绑定表达式,即使用 # 方式进行值的传递。

二.   # 方式:可以理解成非绑定的表达式,即有嵌套的lightning component,父对子传值仅初始化有效,后期父对这个attribute value的变化不会影响到子,同样子对这个attribute value的变化同样不会影响到父。

 在这里重用boundSonComponent,新建unboundParentComponent,使用#方式传递值。

1.unboundParentComponent:和boundParentComponent唯一的区别为在对boundSonComponent传值的时候,将! 修改成了 # . 

<aura:component>
<aura:attribute name="parentAttribute" type="String" default="parentAttributeValue"/>
parentAttribute :
<aura:text value="{!v.parentAttribute}"/><br/>
<lightning:button label="parent button" onclick="{!c.handleParentClick}" /><br/>
<c:boundSonComponent sonAttribute = '{#v.parentAttribute}'/>
</aura:component>

结果展示:

1.当点击parent button时,仅更改了parentAttribute的值,sonAttribute值不会受到影响。

2.当点击son button时,金更改了sonAttribute的值,parentAttribute的值同样不会受到影响。

总结: 通过上述的两个例子的展示结果可以看出来:对子component的attribute进行动态赋值时, !(绑定表达式) 与 #(非绑定表达式)差距还是很大的。使用!方式关系贯穿始终,无论父还是子对attribute改动都会对其关联的受到影响。使用#方式仅在初始化时有效,后期针对引用的attribute的值进行任何修改,都不会同步修改引用的地方。具体使用哪种方式看项目中用到的场景,同步操作则使用!方式传值;仅需要其传值作为初始化,后期改动无关则选择#方式传值。篇中有错误地方欢迎指出,有问题欢迎留言。

以上就是:salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式) 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论