| layout |
|---|
default |
#All About Attributes#
Define An Attribute. Attributes in Action. Review AuraDocs.
Attributes are named parameters in your component that you can display, manipulate and otherwise interact with throughout the component.
##Step 1: Create a New Component - BlogComponent 2##
In your Developer Console, navigate to New > Lightning Component, and create a new bundle named BlogComponent2. Add the following code and save.
{% highlight html %}
<aura:component >
<aura:attribute name="greeting" type="String" default="Hello!" />
{!v.greeting} from Aura.
</aura:component> {% endhighlight %}You'll notice that the attribute is called "greeting" and that the expression {!v.greeting} also refers to "greeting". The {!something} syntax is likely familiar to anyone who's worked in Visualforce. The v in {!v.something} represents the "view". So one way to think of how this component works is that the <aura:attribute /> tag puts a field on the view with a default value, and the {!v.something} pulls the value of the field out of the view and does something with it.
Next, update the Master component to include a reference to the component you just created.
{% highlight html %} <aura:component implements="force:appHostable">
<Reid002:BlogComponent1 /> <Reid002:BlogComponent2 /> </aura:component> {% endhighlight %}And reload the preview of your app on either your regular browser or within the Salesforce1 mobile app.
You can see that the line {!v.greeting} from Aura. renders as exactly what you might have expected: "Hello from Aura." And because I reloaded the preview from my desktop, where I'm loading the app, all the headlines are red.
##Step 2: Attributes in Action##
If you've been around XML for a while, you already know what this next section is going to say, because Aura attributes behave like every other attribute you've ever worked with.
Update your master component code to look like this:
{% highlight html %} <aura:component implements="force:appHostable">
<Reid002:BlogComponent1 /> <Reid002:BlogComponent2 greeting="Wassup" /> </aura:component> {% endhighlight %}Save and preview and you'll see this:
Pretty cool!
##Step 3: Let's Look at AuraDocs##
Remember when we first took a look at AuraDocs, the supercool, always up to date, self-documenting thing that keeps up with your code? If not, click here.
Navigate to your AuraDocs instance, and find this component in the AuraDocs app. What do you notice in the "Attributes" section of the documentation? It should look approximately like this:
You might notice that my screenshot has a description. I added this in the component by adding a "description" attribute to the <aura:attribute /> specification.
{% highlight html %}
<aura:component >
<aura:attribute name="greeting" type="String" default="Hello"
description="This is a sample attribute." />
{!v.greeting} from Aura.
</aura:component> {% endhighlight %}##Next: Javascript Basics##