Ember.js 模型

Ember.js 是一个专注于专业网页开发项目的网络开发框架。它默认使用MVC架构创建应用程序，提高了应用程序结构维护工作的效率。Ember.js是一个高效的框架，使得应用程序的开发和原型制作更加简单和快速。

Ember.js模型： 模型是一个包含对象属性和特性的类。它与Java、C、C++等编程语言中使用的类非常相似。例如，我们想创建一个商店模型，其中包含商店的详细信息，如销售物品、每日收入、商店名称和许多其他详细信息。然后我们需要创建函数来设置和获取模型中的值。

让我们创建一个Ember.js项目，其中我们将创建名为“商店”的模型。我们将拥有一个具有相同详细信息的商店列表。

创建项目：

步骤1： 要创建一个新项目，请在终端/命令提示符中输入以下命令。

ember new models_tutorial

项目结构如下：

Ember.js 模型

步骤2： 项目创建后，使用以下命令运行项目。

ember serve

在成功构建之后，在浏览器中导航到以下URL：http://localhost:4200/ ，您应该能够看到以下输出。

Ember.js 模型

步骤3： 我们需要一些数据传递到应用程序页面。这里为您准备了一些数据。它包含了一些店铺的名称和类别。在app\routes文件夹中创建一个新文件，命名为application.js。 它将为我们提供数据。

app\routes\application.js

Javascript

import Route from '@ember/routing/route'; 
  
export default class ApplicationRoute extends Route { 
  async model() { 
      return { 
          title:"dasds", 
          shops:[ 
              { 
                  name:"Grand Sweet Shop", 
                  category:"Sweet"
              }, 
              { 
                  name:"Wonderful garments", 
                  category:"Clothes"
              }, 
              { 
                  name:"Vidya Bhandar", 
                  category:"Books", 
              } 
                
          ] 
        }; 
    } 
}

步骤4： 现在我们将在应用程序页面上显示模型数据。我们知道数据是一系列相似的项目，所以我们将使用Ember.js的each-helper ，它允许我们遍历项目列表。每个店铺的详细信息都会有一个div容器。最后我们会修改应用程序的CSS。

app\templates\application.hbs 和app\styles\app.css

HTML

{{page-title "ModelsTutorial"}} 
  
<h1> 
    Welcome to GeeksforGeeks 
</h1> 
{{#each @model.shops as |shop|}} 
    <div id="shop"> 
        <h3>{{shop.name}}</h3> 
        <h5>{{shop.category}}</h5> 
    </div> 
      
{{/each}} 
{{outlet}}

CSS

h1{ 
    text-align: center; 
} 
#shop{ 
    margin:4rem; 
    padding:.5rem; 
    background-color: #63ff95; 
    border-radius: 10px; 
    transition-duration:0.5s; 
} 
#shop:hover{ 
    transform: scale(1.1,1.1); 
}

输出： 保存代码，以下是结果。

Ember.js 模型