23

I have seen some uses of {#v.attrib} in a few of lightning components, and I'm a person who is used to {!v.attrib}. Is there a difference between them or is there a scenario where '#' has to be used/is better instead of '!'?

Thanks in advance for your reply!

2
  • 1
    Can you add some links to support the validity of {#...} merge syntax? I've never seen it before. – Adrian Larson Aug 25 '16 at 21:28
  • Strange enough the component compiles with both # and ! in the expression – Rao Aug 25 '16 at 21:56
26

If you want to show a value dynamically based on a aura:attribute, generally we tend to use: {!v.attrib}

Eg: <ui:button label="{!v.attrib}" />

So if you do cmp.set('v.attrib','test'), then aura:framework automagically does an dirty checking and changes the value accordingly.(Two-way binding)

So the label of the <ui:button> is set to test, just think of this as special expression that directly point to the live reference of the attribute in the component(JS perspective), which is quiet similar to {{v.attrib}} expression in Angularjs which eventually does the same thing.

What if you want to show a value dynamically based on a aura:attribute but it needs to work only once,when it is rendered in the view initially.

So you should go with : {#v.attrib} expression, which might improve the performance if there large no.of such expression(where you don't need such bindings), because it won't be taken into account during dirty checking.AngularJS also has the same one-way binding stuff in its armour : {{::v.attrib}}

Here's a video Mastering Lightning Component - Part 1 on this topic.

<aura:component>
    <aura:attribute name="test" type="String" default="world"/>
    hello {#v.test} // print hello world and does not change
    hello {!v.test} // prints hello world and 'test' changes based on input value
    <ui:inputText value="{!v.test}"/> 
</aura:component>
1
  • how to get old value of an attribute in controller? I am creating another attribute just to store old value. But that attribute is also reflected with updated value. – Jigar Trivedi Sep 6 '18 at 14:31
0

Here’s a summary of the differences between the forms of expression syntax.

{#expression} (Unbound Expressions)Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child. {!expression} (Bound Expressions)Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.