当前位置: > > > Template7 - 表达式介绍2(each、with、variableName)

Template7 - 表达式介绍2(each、with、variableName)

Template7 提供了丰富的表达式语法(Expressions syntax)供我们使用,本文介绍其中的 {{#each}}...{{else}}...{{/each}}{{#with}}...{{/with}}{{#variableName}}...{{/variableName}} 这3个表达式。


一、{{#each}}...{{else}}...{{/each}}
{{#each}} 是一块表达式,可以用来遍历数组里的元素,或者一个对象中属性。

1,遍历内部是基本数据类型的数组
(1)假设上下文数据
{
  people : ['John Doe', 'Mark Johnson']
} 
(2)模板样例
<ul>
  {{#each people}}
  <li>{{@index}}. {{this}}</li>
  {{/each}}    
</ul>    
(3)输出结果
<ul>
  <li>0. John Doe</li>
  <li>1. Mark Johnson</li>
</ul> 

2,遍历内部是对象的数组
(1)假设上下文数据
{
  people : [
    {
      firstName: 'John',
      lastName: 'Doe'
    },
    {
      firstName: 'Mark',
      lastName: 'Johnson'
    },
  ]
} 
(2)模板样例
<ul>
  {{#each people}}
  <li>{{firstName}} {{lastName}}</li>
  {{/each}}    
</ul>       
(3)输出结果
<ul>
  <li>John Doe</li>
  <li>Mark Johnson</li>
</ul> 

3,遍历对象属性
(1)假设上下文数据
{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
}
(2)模板样例
<ul>
  {{#each props}}
  <li>{{@key}}: {{this}}</li>
  {{/each}}
</ul>   
(3)输出结果
<ul>
  <li>power: 150 hp</li>
  <li>speed: 200 kn/h</li>
</ul> 

4,{{else}}分支
当没有遍历到任何数据的时候会显示这里面的内容。
(1)假设上下文数据
{
  props: null
}  
(2)模板样例
<ul>
  {{#each props}}
  <li>{{@key}}: {{this}}</li>
  {{else}}
  <li>没有属性</li>
  {{/each}}
</ul>   
(3)输出结果
<ul>
  <li>没有属性</li>
</ul>


二、{{#with}}...{{/with}}
通过传递的上下文改变渲染上下文。
(1)假设上下文数据
{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
} 
(2)模板样例
{{#with props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/with}}   
(3)输出结果
<p>Car has 150 hp power and 200 km/h maximum speed</p>


三、{{#variableName}}...{{/variableName}}

这个是用来简化上面的 {{#each}}{{#with}} 表达式的。

1,如果是数组,则相当于{{#each}}表达式
(1)假设上下文数据
{
  people: [
    {
      name: 'John Doe',
      age: 18
    },
    {
      name: 'Mark Johnson',
      age: 21
    }
  ]  
}
(2)模板样例
<ul>
  {{#people}}
  <li>{{name}} - {{age}} years old</li>
  {{/people}}
</ul>    
(3)输出结果
<ul>
  <li>John Doe - 18 years old</li>
  <li>Mark Johnson - 21 years old</li>
</ul>

2,如果是对象,则相当于{{#with}}表达式
(1)假设上下文数据
{
  props: {
    power: '150 hp',
    speed: '200 km/h',
  }
}
(2)模板样例
{{#props}}
<p>Car has {{power}} power and {{speed}} maximum speed</p>
{{/props}}   
(3)输出结果
<p>Car has 150 hp power and 200 km/h maximum speed</p>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0