Hello everyone, its been 2 days journey working on ember js . Currently i am working on tutorials but i am facing an issue understanding the below syntax
{{#each this.model as |rentalUnit|}}
+ <RentalListing @rental={{rentalUnit}} />
please can anyone make me understand this syntax exactly what is happening , please also tell me about @ and | symbol used that would be a great help . Thank you in advance.
Welcome @Divakar_luffy! Templates in ember can have a lot of functionality. I’ll briefly describe the syntax and link to some examples with better, in-depth explanations.
{{#each is a built in helper for iterating over lists. The above example loops over the model property and binds each entry to the rentalUnit variable in your template. That way you can pass an individual item to the component instead of the entire list. The guides have a page on this that walks through looping through lists in more detail.
The @ character denotes an argument being passed into the <RentalListing component. I’d recommend reading the Octane Guides preview for more detailed discussion. Invoking the component with <RentalListing is known as angle bracket invocation. You can also read Chris Garret’s great blog post on the design and history of that improvement to Ember’s programming model.
Lastly, I like tinkering with example syntax in ember-twiddle or a fresh application. I created this twiddle which loops over a controller property to demonstrate the binding behavior at work in the this.model |rentalUnit| snippet.