Ember handlebars traverses the label

In the same way as in the previous article, a routing file and a corresponding template file were created using the ember generate route handlebars-each command. T his article will introduce you to traversal tags, which are visible in almost any commonly used development language and are a very widely used feature. I 'll introduce you to handlebars label of handlebars, which are used almost the same as EL expressions. I think you'll understand when you look at it... Nonsense less, below directly on the demo code! !

//  app/routes/handlebars.js
import Ember from 'ember';
/**
 * 定义一个用于测试的对象数组
 */
export default Ember.Route.extend({
    //  重写model回调函数，初始化测试数据
    model: function() {
        return [
            Ember.Object.create({ name: 'chen', age: 25}),
            Ember.Object.create({ name: 'i2cao.xyz', age: 0.2}),
            Ember.Object.create({ name: 'ibeginner.sinaapp.com', age: 1}),
            Ember.Object.create({ name: 'ubuntuvim.xyz', age: 3})
        ];
    }
});

As shown above, an route objects for testing is built in the route class, each with two properties name age Here's a template for displaying the data:

{{! 遍历在route里设置的对象数组 }}
<ul>
    {{#each model as |item|}}
        <li>Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
    {{/each}}
</ul>

Is there a feeling that seems to have been similar!! T he forEach label forEach the EL expression. No surprises you should be able to see the following results.

Reminder: Remember that the URL running at this time is the new rout that was just created. When operating arrays, be careful to use the official recommended methods (for pushObject instead push see the previous article.

1, access the array undersrug

In some cases we may need to get the undersequent of the array, for example, sometimes we may sign down as the serial number of the data. Take a look at the demo below:

{{! 遍历在route里设置的对象数组 }}