Currently working through the Create a Standalone Lightning App tutorial, which seems a good introduction to SFDC Lightning, but not entirely flawless.
I have this component
<aura:component controller="Sledgehammer.ExpenseController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="expenses" type="Sledgehammer.Expense__c" />
<aura:attribute name="newExpense" type="Sledgehammer.Expense__c"
default="{
'sobjectType' :'Sledgehammer__Expense__c',
'Name' :'',
'Sledgehammer__Amount__c' :0,
'Sledgehammer__Client__c' :'',
'Sledgehammer__Date__c' :'',
'Sledgehammer__Reimbursed__c': false
}"/>
<!-- Attributes for Expense Counters-->
<aura:attribute name="total" type="Double" default="0.00" />
<aura:attribute name="exp" type="Double" default="0" />
<!-- Input Form using components -->
<form>
<fieldset>
<ui:InputText aura:Id="expname" label="Expense Name" class="form-control" value="{!v.newExpense.name}" placeholder="My Expense" required="true" />
<ui:InputNumber aura:Id="amount" label="Amount" class="form-control" value="{!v.newExpense.Sledgehammer__Amount__c}" placeholder="20.80" required="true" />
<ui:InputText aura:Id="client" label="Client" class="form-control" value="{!v.newExpense.Sledgehammer__Client__c}" placeholder="ABC Co." />
<ui:InputDateTime aura:Id="expdate" label="Expense Date" class="form-control" value="{!v.newExpense.Sledgehammer__Date__c}" displayDatePicker="true" />
<ui:InputCheckbox aura:Id="reimbursed" label="Reimbursed?" class="form-control" value="{!v.newExpense.Sledgehammer__Reimbursed__c}" />
<ui:button label="Submit" press="{!c.createExpense}" />
</fieldset>
</form>
<!-- Expense Counters -->
<div class="row">
<!-- Change the counter color to red if total amount is more than 100 -->
<div class="{!v.total>100 ? 'alert alert-danger' : 'alert alert-success'}">
<h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00" />
</div>
<div class="alert alert-success">
<h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}" />
</div>
</div>
<!-- Display expense records -->
<div class="row">
<aura:iteration items="{!v.expenseDisplayList}" var="expense">
<Sledgehammer:expenseList expense="{!expense}"/>
</aura:iteration>
</div>
which is indirectly associated with this Helper.js:
({
getExpenseList: function(component)
{
var action = component.get("c.getExpenseList");
var self = this;
action.setCallback(this, function(a)
{
component.set("v.expenses", a.getReturnValue());
self.updateTotal(component);
});
$A.enqueueAction(action);
},
updateTotal : function(component)
{
var expenses = component.get("v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++)
{
var e = expenses[i];
total += e.Sledgehammer__Amount__c;
}
//Update counters
component.set("v.total", total);
component.set("v.exp", expenses.length);
},//Delimiter for future code
})
According to the tutorial text (not necessarily the code), if I understand it correctly, by this point, the Expense__c records should be listing within/by the <aura:iteration> element.
But, that doesn't seem to be happening.
As the totals are updating, I believe the AJAX and SOQL query in the controller ARE working, but I don't see any code which would cause the <aura:iteration> element to refresh or [re]render.
For whatever it is worth, as requested by @Vignex, here is also the expenseList component:
<aura:component>
<aura:attribute name="expense" type="Sledgehammer.Expense__c" />
<!-- Color the item blue if the expense is reimbursed -->
<div class="{!v.expense.Sledgehammer__Reimbursed__c == true ? 'listRecord recordLayout blue' : 'listRecord recordLayout white'}" >
Test {!expense.id}
<a aura:id="expense" href="{!'/'+v.expense.id}">
<div class="itemTitle">{!v.expense.name}</div>
<div class="recordItem">Amount:
<ui:outputNumber value="{!v.expense.Sledgehammer__Amount__c}" format=".00" />
</div>
<div class="recordItem">Client:
<ui:outputText value="{!v.expense.Sledgehammer__Client__c}" />
</div>
<div class="recordItem">Date:
<ui:outputDateTime value="{!v.expense.Sledgehammer__Date__c}" />
</div>
<div class="recordItem">Reimbursed?
<ui:inputCheckbox value="{!v.expense.Sledgehammer__Reimbursed__c}" click="{!c.update}" />
</div>
</a>
</div>
Am I correct that is missing? If so, how should I fix it? If not, what else may be (or is) wrong?
(FWIW, I have a colleague who is independently following the same tutorial and is also failing to get the expected result, so I suspect this reflects a defect within the tutorial itself... or possibly reflects an instability within Lightning which is still only in Beta.)
