ember.js

by Tracy Lee | ladyleet

特雷西·李(Tracy Lee)| Ladyleet

如何設(shè)置基本的Ember.js應(yīng)用 (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.

所以，您想測(cè)試Ember，是嗎？ 本文將逐步構(gòu)建一個(gè)基本的應(yīng)用程序。

Here’s what we’ll do:

這是我們要做的：

Set up ember-cli

設(shè)置ember-cli

Create a new application

創(chuàng)建一個(gè)新的應(yīng)用程序

Use materalize-css for styling

使用materalize-css進(jìn)行樣式設(shè)計(jì)

Create components

創(chuàng)建組件

Cover basic use of Ember’s router

涵蓋Ember路由器的基本用法

Explore the “each” helper for iterating over data

探索“每個(gè)”助手來遍歷數(shù)據(jù)

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.

首先，您應(yīng)該安裝ember-cli。 幾乎所有應(yīng)用程序都是使用ember-cli構(gòu)建的。 很少會(huì)發(fā)現(xiàn)一個(gè)不是的。

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社區(qū)的一個(gè)主要好處-與Angular和React相比，他們更加依賴約定而不是配置。 他們將其作為優(yōu)勢(shì)之一，使其成為想要構(gòu)建大型應(yīng)用程序的公司的流行框架。

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)

遵循常規(guī)可以使Ember制定社區(qū)標(biāo)準(zhǔn)，例如ember-cli-deploy故事，圍繞Ember Data的精彩故事以及社區(qū)能夠通過ember插件生態(tài)系統(tǒng)做出的大量貢獻(xiàn)。 (查看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網(wǎng)站上，您會(huì)找到簡(jiǎn)單的安裝說明，甚至可以找到一些快速入門指南！

Go ahead and install ember-cli to get started:

繼續(xù)并安裝ember-cli以開始使用：

$ npm install -g ember-cli

創(chuàng)建一個(gè)新的應(yīng)用程序 (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一樣簡(jiǎn)單！ 只需嵌入新的<project na me>，就會(huì)為您生成一個(gè)應(yīng)用程序。

ember new yolobrolo

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

您會(huì)看到ember-cli創(chuàng)建了很多文件。

Mainly, you should note that Ember has created:

主要，您應(yīng)該注意Ember已創(chuàng)建：

• 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
  測(cè)試

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

哇！ 現(xiàn)在，如果您打開IDE，則應(yīng)該看到Ember應(yīng)用程序的結(jié)構(gòu)。

安裝Materialize-CSS (Installing Materialize-CSS)

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

如果您想知道，我喜歡材料設(shè)計(jì)和materialize-css。

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

因此，如果要使用我通常使用的樣式，請(qǐng)繼續(xù)運(yùn)行以下命令。

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:

完成后，終止服務(wù)器并重新啟動(dòng)它。 您的字體應(yīng)更改為Roboto：

創(chuàng)建組件 (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.

像當(dāng)今大多數(shù)JavaScript框架一樣，Ember喜歡組件。 因此，讓我們創(chuàng)建所需的組件：一個(gè)導(dǎo)航??欄，可以將路由器連接到該導(dǎo)航欄！ 我們使用materialize-css給我們的導(dǎo)航欄。

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

創(chuàng)建組件所需要做的就是：

ember g component <component-name>

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

確保組件名稱的名稱中帶有短劃線，因?yàn)檫@是慣例。

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

這是ember-cli為我生成的文件。 它創(chuàng)建：

• component-name.hbs
  組件名稱.hbs
• component-name.js
  component-name.js
• adds integration tests
  添加集成測(cè)試

This is what my pretty nav-bar looks like.

這就是我漂亮的導(dǎo)航欄的樣子。

Here’s the default code if you like:

如果您愿意，這是默認(rèn)代碼：

<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. :)

每當(dāng)您需要一遍又一遍地重復(fù)使用一段代碼時(shí)，始終最好使其成為組件。 :)

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

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

我認(rèn)為在Angular 2玩了這么多之后，我認(rèn)為Ember的路由器是理所當(dāng)然的。

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

實(shí)際上，我認(rèn)為我一般認(rèn)為路由器是理所當(dāng)然的，但是我的朋友Jay Phelps告訴我們?yōu)槭裁次覀儜?yīng)該關(guān)心。

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.

首先，您應(yīng)該注意有一個(gè)router.js文件，其中定義了所有路由。 另外，在application.hbs文件中，有{{outlet}}輸出指定路由器的內(nèi)容。

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

在我的應(yīng)用中，我想創(chuàng)建2條簡(jiǎn)單的路線-“關(guān)于”頁面和“視頻”頁面。

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

要?jiǎng)?chuàng)建新路由，請(qǐng)?jiān)趀mber-cli中運(yùn)行此命令。

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.
  創(chuàng)建一個(gè)單元測(cè)試。

You can see all the magic from the command line:

您可以從命令行查看所有魔術(shù)：

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文件自動(dòng)為我更新的方式。 您甚至可以從命令行創(chuàng)建嵌套路由。 Ember.js指南非常棒，這是路由器可以執(zhí)行的所有操作的鏈接 。

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.

我在下面的屏幕截圖中所做的一件事是定義了我的默認(rèn)路由。 我只是通過將路由路徑指定為/來做到這一點(diǎn)。 其他所有內(nèi)容都是使用CLI為我預(yù)先生成的。

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.

確實(shí)，我添加到application.hbs文件中的唯一內(nèi)容之一是導(dǎo)航欄和頁腳。 我為其他所有路線創(chuàng)建路線。

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.

現(xiàn)在，進(jìn)入我的導(dǎo)航欄組件，我將獲得關(guān)于網(wǎng)頁頁面路線和視頻路線的路線。

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

Ember使用{{link-to}}幫助程序在路線之間進(jìn)行轉(zhuǎn)換。

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>標(biāo)記，這是我們?cè)贓mber中的各條路由之間進(jìn)行轉(zhuǎn)換的方式。 您需要做的就是在括號(hào)中指定路線，如上所示。 在Angular 2中，等效的是routerLink。

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

這是我整個(gè)導(dǎo)航欄的屏幕截圖。

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

現(xiàn)在您知道了如何使用路由器的基本功能！

使用每個(gè)助手迭代數(shù)據(jù) (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視頻。 我將創(chuàng)建一個(gè)簡(jiǎn)單的視頻卡組件，將對(duì)其進(jìn)行迭代并顯示在視頻頁面上。

This is what one video card looks like:

這是一個(gè)視頻卡的外觀：

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

所有使您可以在應(yīng)用程序中完成出色工作的助手，都是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.

有關(guān)每個(gè)幫助程序和一般幫助程序的完整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.

進(jìn)行布局后，我意識(shí)到我要遍歷3個(gè)數(shù)據(jù)-標(biāo)題，YouTube視頻鏈接和視頻中的人物。

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

因此，我需要像這樣在我的component.js文件的數(shù)組中定義數(shù)據(jù)：

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}}幫助程序來遍歷我的數(shù)據(jù)。

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

使用{{each}}輔助函數(shù)將內(nèi)容包裝起來，如下所示，定義模型和局部變量：

{{#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:

然后，將您想動(dòng)態(tài)化的內(nèi)容片段替換為把手和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}}幫助器的最終結(jié)果。

部署到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.

曾幾何時(shí)，有一個(gè)人叫做托尼科科。 而且tonycoco使將余燼應(yīng)用程序部署到Heroku變得非常容易。 如果您想了解一下，這是他的github回購(gòu) 。

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

首先，您應(yīng)該已安裝Heroku Toolbelt并與您的Heroku帳戶關(guān)聯(lián)。

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).

進(jìn)入您的Heroku應(yīng)用儀表板 。 將應(yīng)用更新為您想要的名稱(以匹配您的應(yīng)用)。

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

現(xiàn)在更改Heroku遠(yuǎn)程名稱以匹配您的.git / config文件中的新應(yīng)用程序名稱。

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

然后， git再次推送heroku master ，您應(yīng)該一切準(zhǔn)備就緒 ！

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

在這種情況下，該應(yīng)用已部署：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上進(jìn)行構(gòu)建 。

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

ember.js

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的ember.js_如何设置基本的Ember.js应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。