ember.js_如何设置基本的Ember.js应用

ember.js

by Tracy Lee | ladyleet

特雷西·李(Tracy Lee)| Ladyleet

如何设置基本的Ember.js应用 (How to set up a Basic Ember.js app)

So, you want to test out Ember, eh? This article will walk through building a basic app.

所以，您想测试Ember，是吗？ 本文将逐步构建一个基本的应用程序。

Here’s what we’ll do:

这是我们要做的：

1. Set up ember-cli
   设置ember-cli
2. Create a new application
   创建一个新的应用程序
3. Use materalize-css for styling
   使用materalize-css进行样式设计
4. Create components
   创建组件
5. Cover basic use of Ember’s router
   涵盖Ember路由器的基本用法
6. Explore the “each” helper for iterating over data
   探索“每个”助手来遍历数据

First things first, you should install ember-cli. Almost all applications are built with ember-cli. It’s very rare that you’ll find one that is not.

首先，您应该安装ember-cli。 几乎所有应用程序都是使用ember-cli构建的。 很少会发现一个不是的。

And here’s one major benefit of Ember and the Ember community — they rely on convention over configuration more heavily than Angular and React do. They use this as one of their strengths, making them a popular framework for companies who want to build large scale applications.

这是Ember和Ember社区的一个主要好处-与Angular和React相比，他们更加依赖约定而不是配置。 他们将其作为优势之一，使其成为想要构建大型应用程序的公司的流行框架。

Being conventional allows Ember to develop community standards such as the ember-cli-deploy story, a strong story around Ember Data, and the loads of contributions the community is able to make through the ember addon ecosystem. (check out emberaddons.com)

遵循常规可以使Ember制定社区标准，例如ember-cli-deploy故事，围绕Ember Data的精彩故事以及社区能够通过ember插件生态系统做出的大量贡献。 (查看emberaddons.com )

At the Ember.js website, you’ll find simple install instructions, and even a little quick start guide you can walk through!

在Ember.js网站上，您会找到简单的安装说明，甚至可以找到一些快速入门指南！

Go ahead and install ember-cli to get started:

继续并安装ember-cli以开始使用：

$ npm install -g ember-cli

创建一个新的应用程序 (Creating a new application)

This is as easy as 1–2–3! Simply ember new <project name> and an application will be generated for you.

就像1-2一样简单！ 只需嵌入新的<project na me>，就会为您生成一个应用程序。

ember new yolobrolo

You’ll see ember-cli creating quite a few files.

您会看到ember-cli创建了很多文件。

Mainly, you should note that Ember has created:

主要，您应该注意Ember已创建：

• application.hbs (handlebars, which is your html file)
  application.hbs(把手，这是您的html文件)
• app.js
  app.js
• router.js
  router.js
• package.json
  package.json
• bower.json
  bower.json
• tests
  测试

Wahoo! Now, if you open up your IDE, you should see the structure of an Ember application.

哇！ 现在，如果您打开IDE，则应该看到Ember应用程序的结构。

安装Materialize-CSS (Installing Materialize-CSS)

In case you were wondering, I love material design and materialize-css.

如果您想知道，我喜欢材料设计和materialize-css。

So, if you want to use the styles I usually use, go ahead run the following command.

因此，如果要使用我通常使用的样式，请继续运行以下命令。

npm install materialize-css

Then, add these lines to your index.html file

然后，将这些行添加到index.html文件中

<!-- Compiled and minified CSS -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<!--Import Google Icon Font-->      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified JavaScript -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

When done, kill your server and restart it. Your font should change to Roboto:

完成后，终止服务器并重新启动它。 您的字体应更改为Roboto：

创建组件 (Creating components)

Ember, like most JavaScript frameworks these days, loves components. So let’s create the component we need: a navigation bar that we can hook up the router to! We use the nav bar that materialize-css gives us.

像当今大多数JavaScript框架一样，Ember喜欢组件。 因此，让我们创建所需的组件：一个导航​​栏，可以将路由器连接到该导航栏！ 我们使用materialize-css给我们的导航栏。

All you need to do to create a component is this:

创建组件所需要做的就是：

ember g component <component-name>

Make sure the name of your component has a dash in the name as this is the convention.

确保组件名称的名称中带有短划线，因为这是惯例。

Here are the files that ember-cli generates for me. It creates:

这是ember-cli为我生成的文件。 它创建：

• component-name.hbs
  组件名称.hbs
• component-name.js
  component-name.js
• adds integration tests
  添加集成测试

This is what my pretty nav-bar looks like.

这就是我漂亮的导航栏的样子。

Here’s the default code if you like:

如果您愿意，这是默认代码：

<nav>    <div class="nav-wrapper">      <a href="#" class="brand-logo center">Logo</a>      <ul id="nav-mobile" class="left hide-on-med-and-down">        <li><a href="#">Videos</a></li>        <li><a href="#">About</a></li>      </ul>    </div>  </nav>

Anytime you need to reuse a piece of code over and over again, it’s always best to make it a component. :)

每当您需要一遍又一遍地重复使用一段代码时，始终最好使其成为组件。 :)

使用Ember的路由器 (Using Ember’s router)

I think I take Ember’s router for granted after playing around in Angular 2 so much.

我认为在Angular 2玩了这么多之后，我认为Ember的路由器是理所当然的。

Actually, I think I take routers for granted in general, but here is my friend Jay Phelps telling us why we should care.

实际上，我认为我一般认为路由器是理所当然的，但是我的朋友Jay Phelps告诉我们为什么我们应该关心。

Here’s a basic overview of how Ember’s router works.

这是Ember路由器工作原理的基本概述。

First things first, you should note there is a router.js file in which all of your routes are defined. Also, in your application.hbs file, there is {{outlet}} which outputs whatever you specify the router to.

首先，您应该注意有一个router.js文件，其中定义了所有路由。 另外，在application.hbs文件中，有{{outlet}}输出指定路由器的内容。

In my app, I want to create 2 simple routes — an about page and a videos page.

在我的应用中，我想创建2条简单的路线-“关于”页面和“视频”页面。

To create a new route you run this command in ember-cli.

要创建新路由，请在ember-cli中运行此命令。

ember g route <route-name>

Ember will then generate:

灰烬然后将生成：

• your-route.js
  your-route.js
• your-route.hbs
  您的route.hbs
• update the router.js file
  更新router.js文件
• create a unit test.
  创建一个单元测试。

You can see all the magic from the command line:

您可以从命令行查看所有魔术：

I love how the router.js file is automatically updated for me. You can even create nested routes from the command line. The Ember.js guides are pretty awesome and here is a link to everything the router can do.

我喜欢router.js文件自动为我更新的方式。 您甚至可以从命令行创建嵌套路由。 Ember.js指南非常棒，这是路由器可以执行的所有操作的链接 。

One thing I did in the screenshot below was define my default route. I did that by simply specifying the route path as /. Everything else was pre-generated for me with the CLI.

我在下面的屏幕截图中所做的一件事是定义了我的默认路由。 我只是通过将路由路径指定为/来做到这一点。 其他所有内容都是使用CLI为我预先生成的。

this.route(‘videos’, { path:’/’ });

配置Ember路由器的输出 (Configuring the output of Ember’s router)

Let’s explore the application.hbs file. This is where the router will output.

让我们探索application.hbs文件。 这是路由器将输出的位置。

Really, one of the only things I add into my application.hbs file is a navigation bar and footer. I create routes for everything else.

确实，我添加到application.hbs文件中的唯一内容之一是导航栏和页脚。 我为其他所有路线创建路线。

Currently my application.hbs file looks like this.

目前，我的application.hbs文件看起来像这样。

Now, going into my nav-bar component I’m going to get routes going for the about page route and the videos route.

现在，进入我的导航栏组件，我将获得关于网页页面路线和视频路线的路线。

Ember uses the {{link-to}} helper for transitions between routes.

Ember使用{{link-to}}帮助程序在路线之间进行转换。

Here’s what the syntax looks like:

语法如下所示：

{{#link-to ‘videos’}}Videos{{/link-to}}

The {{link-to}} helper replaces an <a> tag and is the way we transition between routes in Ember. All you need to do is specify the route in the parens as shown above. In Angular 2, the equivalent is the routerLink.

{{link-to}}帮助程序替换了<a>标记，这是我们在Ember中的各条路由之间进行转换的方式。 您需要做的就是在括号中指定路线，如上所示。 在Angular 2中，等效的是routerLink。

Here’s a screenshot of my entire nav-bar.

这是我整个导航栏的屏幕截图。

Now you know how to use the very basic functionality of the router!

现在您知道了如何使用路由器的基本功能！

使用每个助手迭代数据 (Iterating Over Data Using the Each Helper)

I have a video route, and I’d like to display a set of YouTube videos on the page. I’m going to create a simple video-card component that I will be iterating over and displaying on the video page.

我有一条视频路线，我想在页面上显示一组YouTube视频。 我将创建一个简单的视频卡组件，将对其进行迭代并显示在视频页面上。

This is what one video card looks like:

这是一个视频卡的外观：

Part of Ember’s beauty is all the helpers that allow you to do cool things in your app.

所有使您可以在应用程序中完成出色工作的助手，都是Ember的美丽之选。

Ember’s {{each}} helper is equivalent to the ng-repeat directive in Angular 1 and the *ngFor directive in Angular 2.

Ember的{{each}}辅助程序等效于Angular 1中的ng-repeat指令和Angular 2中的* ngFor指令。

Full ember docs on the each helper and helpers in general are here.

有关每个帮助程序和一般帮助程序的完整ember文档在这里 。

Here is what the code for one YouTube video displayed looks like:

这是显示的一部YouTube视频的代码如下所示：

<div class=”row”> <div class=”col s12 m6 l4"> <div class=”card-panel center-align”> <div class=”purple-text”> <p>Title</p> </div> <div class=”video-container”> <iframe width=”853" height=”480" src=”https://www.youtube.com/embed/peNV2yJRMLo?rel=0" frameborder=”0" allowfullscreen></iframe> </div> <div class=”purple-text”> With Taras Mankovski </div> </div> </div></div>

After laying it out, I realize that I want to iterate over 3 pieces of data — the title, the YouTube video link, and the person featured in the video.

进行布局后，我意识到我要遍历3个数据-标题，YouTube视频链接和视频中的人物。

So, I need to define my data in an array in my component.js file like such:

因此，我需要像这样在我的component.js文件的数组中定义数据：

model: [{ title: “Ember DND Helper”, people: “Taras Mankovski”, videoLink: “peNV2yJRMLo?rel=0” },{ title: “Dependency Injection in Angular 2”, people: “Patrick J. Stapleton”, videoLink: “46WovCX8i-I?rel=0” },{ title: “Angular CLI”, people: “Mike Brocchi”, videoLink: “BmZLpNRNnZo” },{ title: “Angular Material 2 Spelunking & Issue Submission”, people: “Ben Lesh”, videoLink: “3gNsyL7wpXU” }]});

Then, I can finally use the {{each}} helper to iterate over my data.

然后，我终于可以使用{{each}}帮助程序来遍历我的数据。

Wrap the content with the {{each}} helper as below, defining the model and your local variable:

使用{{each}}辅助函数将内容包装起来，如下所示，定义模型和局部变量：

{{#each model as |video|}} CONTENT {{/each}}

Then, take the pieces of content you’d like to be dynamic and replace it with handlebars and localVariable.x, like so:

然后，将您想动态化的内容片段替换为把手和localVariable.x，如下所示：

{{video.title}}

src="https://www.youtube.com/embed/{{video.videoLink}}"

{{video.people}}

Here’s what the code looks like when it’s all said and done:

说完这些，代码就是这样的：

<div class=”row”> {{#each model as |video|}} <div class=”col s12 m6 l4"> <div class=”card-panel center-align”> <div class=”purple-text”> <p>{{video.title}}</p> </div> <div class=”video-container”> <iframe width=”853" height=”480" src=”https://www.youtube.com/embed/{{video.videoLink}}" frameborder=”0" allowfullscreen></iframe> </div> <div class=”purple-text”> With {{video.people}} </div> </div> </div> {{/each}}</div>

Here’s the end result of using the {{each}} helper.

这是使用{{each}}帮助器的最终结果。

部署到Heroku (Deploying to Heroku)

Once upon a time there existed a man called tonycoco. And tonycoco made deploying ember apps to Heroku super easy. Here’s his github repo if you want to peep in on this.

曾几何时，有一个人叫做托尼科科。 而且tonycoco使将余烬应用程序部署到Heroku变得非常容易。 如果您想了解一下，这是他的github回购 。

First, you should have the Heroku Toolbelt installed and linked with your Heroku account.

首先，您应该已安装Heroku Toolbelt并与您的Heroku帐户关联。

Then, all you have to do to deploy to Heroku is commit your changes to master and push.

然后，部署到Heroku所要做的就是将更改提交给master和push。

$ heroku create — buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git

$ git push heroku master

Wait for it to finish deploying completely.

等待它完全完成部署。

Go into your Heroku app dashboard. Update app to the name you want (to match your app).

进入您的Heroku应用仪表板 。 将应用更新为您想要的名称(以匹配您的应用)。

Now change the Heroku remote name to match new app name in your .git/config file.

现在更改Heroku远程名称以匹配您的.git / config文件中的新应用程序名称。

Then, git push heroku master again and you should be all set!

然后， git再次推送heroku master ，您应该一切准备就绪 ！

In this case, this app deployed: http://yolobrolo-ember-1.herokuapp.com/

在这种情况下，该应用已部署：http: //yolobrolo-ember-1.herokuapp.com/

Yolo! Have fun with it. Hope you try out Ember and enjoy it.

olo！ 玩得开心。 希望您尝试Ember并喜欢它。

看着我一步一步地建立 (Watch me build this step by step)

Oh also, for your viewing purposes, you can watch me build this on YouTube at yolobrolo.

哦，出于您的观看目的，您可以在yolobrolo上观看我在YouTube上进行构建 。

翻译自: https://www.freecodecamp.org/news/setting-up-a-basic-ember-js-app-c9323760c675/

ember.js