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