Ember.js 模板

Ember.js 是一个专注于专业网站开发项目的Web开发框架。它默认采用MVC架构，提高了维护应用程序结构的工作效率。Ember.js是一个高效的框架，可以简化和加速应用程序的开发和原型设计过程。

Ember.js模板： 模板就是带有动态内容特性的简单HTML。如果你以前使用过Handlebar视图引擎，你可能会发现它们的语法几乎相同。我们可以在模板中使用CSS。Ember.js的根模板是application.hbs。因此，在Ember.js中，模板就是handlebars。所有Ember.js模板都放在app\templates文件夹中。

模板CSS： HTML离不开CSS。CSS文件放置在app\styles\app.css中。这个CSS文件自动对我们的组件和模板中的所有模板可用。

传递数据： 使用模型钩子 传递的任何数据都可以使用{{ data }} 标签包含在模板中。这里有一些与handlebars辅助标签类似的标签。

{{data}} 用于包含传递的数据。
{{#each}} {{/each}} 用作遍历数据项列表的for循环。
{{#if}} {{/if}} 用作if块。
{{else}} 用作else块。

示例： 在这个示例中，我们将向根模板app\templates\application.hbs传递一些数据，然后相应地显示出来。我们还将使用放置在app\styles\app.css中的CSS文件样式化模板文件中的内容。

创建一个新项目：

步骤1： 输入以下命令来创建一个新的Ember.js应用程序 项目。

ember new ember_templates_tutorial

我们应用程序的项目结构 如下所示。

Ember.js 模板

ember serve

几分钟后，您应该在终端或命令提示符上收到以下输出。

Ember.js 模板

Model()函数是一个模型钩子。它负责获取或检索数据并将其提供给模板文件。然后，根据数据进行渲染。所以我们将提供一个项目列表来显示。

步骤2: 接下来，在app\routes文件夹中创建一个名为application.js的新文件。这个文件将为我们提供数据，以便动态地在模板文件application.hbs中进行渲染。在application.js文件中，我们将扩展Route类，然后将数据导出为一个model()函数，用于我们的application.hbs文件。

app\routes\application.js

Javascript

import Route from '@ember/routing/route'; 
  
export default class ApplicationRoute extends Route { 
  async model() { 
    return { 
      items: [ 
        { 
          name: 'Data Structures', 
          link:  
'https://www.geeksforgeeks.org/data-structures/', 
        }, 
        { 
          name: 'Algorithms', 
          link:  
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/', 
        }, 
        { 
          name: 'Competitive Programming', 
          link:  
 'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/', 
        }, 
      ], 
    }; 
  } 
}

步骤3： 现在在app\templates\application.hbs 文件中，我们将运行{{#each}} 循环 类似于我们在handlebars中运行的方式。我们的application.hbs文件接收我们在创建的routes文件夹中的routes文件发送的模型数据。因此，运行循环来渲染我们想要显示的每个项目。

app\templates\application.hbs

HTML

{{page-title "EmberTemplatesTutorial"}} 
<div id="container"> 
  <h1>GeeksforGeeks</h1> 
  {{#each @model.items as |item|}} 
  
  <div class="item"> 
    <h3>{{item.name}}</h3> 
    <a href="{{item.link}}" target="blank">Click Here</a> 
  </div> 
  
  {{/each}} 
</div> 
  
  
{{outlet}}

步骤4: 这些项目也将有一些样式。它是我们用来给HTML网站设置样式的CSS 。样式是自己选择的，但这里有一些基本样式的代码。

app\styles\app.css

CSS

#container { 
  margin-left: auto; 
  margin-right: auto; 
  width: 200px; 
} 
.item { 
  background-color: rgb(148, 255, 175); 
  width: 200px; 
  margin: 0.5rem; 
  border-radius: 10px; 
  text-align: center; 
} 
.item:hover { 
  background-color: rgb(96, 163, 113); 
  transform: scale(1.1); 
} 
.item a:hover { 
  color: white; 
}

第五步： 保存代码。Ember会自动刷新指向http://localhost:4200/ 的网页。结果如下所示。