Expand file tree
/
Copy pathember
/Directory actions
More options
More optionsDirectory actions
More options
More options/
Copy pathember
/Folders and files
| Name | Name | Last commit date | |
|---|---|---|---|
parent directory.. | |||
<!DOCTYPE HTML>
<html lang="en-US" manifest="../manifest.appcache">
<head>
<meta charset="UTF-8">
<title>Ember | Full Stack JavaScript Engineering</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="generator" content="GitBook 0.5.2">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<meta name="author" content="ivanoats">
<link rel="next" href="../auth_auth/README.html" />
<link rel="prev" href="../day10/README.html" />
</head>
<body>
<link rel="stylesheet" href="../gitbook/style.css">
<div class="book" data-github="ivanoats/Full-Stack-JavaScript-Engineering" data-level="13" data-basepath=".." data-revision="1403537617260">
<div class="book-header">
<!-- Actions Left -->
<a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
<a href="https://github.com/ivanoats/Full-Stack-JavaScript-Engineering" target="_blank" class="btn pull-left home-bookmark" aria-label="GitHub home"><i class="fa fa-bookmark-o"></i></a>
<a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
<span id="font-settings-wrapper">
<a href="#" class="btn pull-left toggle-font-settings" aria-label="Toggle font settings"><i class="fa fa-font"></i>
</a>
<div class="dropdown-menu font-settings">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<div class="btn-group btn-block">
<button id="reduce-font-size" class="btn btn-default">A</button>
<button id="enlarge-font-size" class="btn btn-default">A</button>
</div>
<ul class="list-group font-family-list">
<li class="list-group-item" data-font="0">Serif</li>
<li class="list-group-item" data-font="1">Sans</li>
</ul>
<div class="btn-group btn-group-xs btn-block color-theme-list">
<button type="button" class="btn btn-default" id="color-theme-preview-0" data-theme="0">White</button>
<button type="button" class="btn btn-default" id="color-theme-preview-1" data-theme="1">Sepia</button>
<button type="button" class="btn btn-default" id="color-theme-preview-2" data-theme="2">Night</button>
</div>
</div>
</span>
<!-- Actions Right -->
<a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
<a href="https://github.com/ivanoats/Full-Stack-JavaScript-Engineering/stargazers" target="_blank" class="btn pull-right count-star hidden-xs"><i class="fa fa-star-o"></i> Star (<span>-</span>)</a>
<a href="https://github.com/ivanoats/Full-Stack-JavaScript-Engineering/watchers" target="_blank" class="btn pull-right count-watch hidden-xs"><i class="fa fa-eye"></i> Watch (<span>-</span>)</a>
<!-- Title -->
<h1>
<i class="fa fa-spinner fa-spin"></i>
<a href="../" >Full Stack JavaScript Engineering</a>
</h1>
</div>
<div class="book-summary">
<div class="book-search">
<input type="text" placeholder="Search" class="form-control" />
</div>
<ul class="summary">
<li>
<a href="https://www.codefellows.org/full-stack-javascript-development-accelerator" target="blank" class="author-link">About the author</a>
</li>
<li>
<a href="https://github.com/ivanoats/Full-Stack-JavaScript-Engineering/issues" target="blank"class="issues-link">Questions and Issues</a>
</li>
<li>
<a href="https://github.com/ivanoats/Full-Stack-JavaScript-Engineering/edit/master/ember/README.md" target="blank" class="contribute-link">Edit and Contribute</a>
</li>
<li class="divider"></li>
<li data-level="0" data-path="index.html">
<a href="../"><i class="fa fa-check"></i> Introduction</a>
</li>
<li class="chapter " data-level="1" data-path="pre-work/README.html">
<a href="../pre-work/README.html">
<i class="fa fa-check"></i> <b>1.</b> Prework
</a>
</li>
<li class="chapter " data-level="2" data-path="communication/connect_to_irc.html">
<a href="../communication/connect_to_irc.html">
<i class="fa fa-check"></i> <b>2.</b> Connect to IRC
</a>
</li>
<li class="chapter " data-level="3" data-path="day1/README.html">
<a href="../day1/README.html">
<i class="fa fa-check"></i> <b>3.</b> Day One
</a>
<ul class="articles">
<li class="chapter " data-level="3.1" data-path="day1/ToolsOverview.html">
<a href="../day1/ToolsOverview.html">
<i class="fa fa-check"></i> <b>3.1.</b> JavaScript Tools Overview
</a>
</li>
<li class="chapter " data-level="3.2" data-path="day1/pull_request_practice.html">
<a href="../day1/pull_request_practice.html">
<i class="fa fa-check"></i> <b>3.2.</b> Github Pull Request Practice
</a>
</li>
<li class="chapter " data-level="3.3" data-path="day1/computer_setup.html">
<a href="../day1/computer_setup.html">
<i class="fa fa-check"></i> <b>3.3.</b> Computer Setup
</a>
</li>
<li class="chapter " data-level="3.4" data-path="day1/initial_toolchain_practice.html">
<a href="../day1/initial_toolchain_practice.html">
<i class="fa fa-check"></i> <b>3.4.</b> Make sure grunt works
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="4" data-path="day2/README.html">
<a href="../day2/README.html">
<i class="fa fa-check"></i> <b>4.</b> Day Two
</a>
<ul class="articles">
<li class="chapter " data-level="4.1" data-path="day2/async_demo.html">
<a href="../day2/async_demo.html">
<i class="fa fa-check"></i> <b>4.1.</b> Async Demo
</a>
</li>
<li class="chapter " data-level="4.2" data-path="day2/hello_express.html">
<a href="../day2/hello_express.html">
<i class="fa fa-check"></i> <b>4.2.</b> Hello Express
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="5" data-path="day3/README.html">
<a href="../day3/README.html">
<i class="fa fa-check"></i> <b>5.</b> Day Three
</a>
<ul class="articles">
<li class="chapter " data-level="5.1" data-path="day3/responsive.html">
<a href="../day3/responsive.html">
<i class="fa fa-check"></i> <b>5.1.</b> Responsive Web Design
</a>
</li>
<li class="chapter " data-level="5.2" data-path="day3/Grunt.html">
<a href="../day3/Grunt.html">
<i class="fa fa-check"></i> <b>5.2.</b> Grunt
</a>
</li>
<li class="chapter " data-level="5.3" data-path="day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html">
<a href="../day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html">
<i class="fa fa-check"></i> <b>5.3.</b> Personal Blog Site Tutorial with Yeoman and Zurb
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="6" data-path="day4/README.html">
<a href="../day4/README.html">
<i class="fa fa-check"></i> <b>6.</b> Day Four
</a>
<ul class="articles">
<li class="chapter " data-level="6.1" data-path="day4/acceptance_testing_with_casperjs.html">
<a href="../day4/acceptance_testing_with_casperjs.html">
<i class="fa fa-check"></i> <b>6.1.</b> Acceptance Testing with CasperJS
</a>
</li>
<li class="chapter " data-level="6.2" data-path="day4/Sass.html">
<a href="../day4/Sass.html">
<i class="fa fa-check"></i> <b>6.2.</b> Sass
</a>
</li>
<li class="chapter " data-level="6.3" data-path="day4/Heroku.html">
<a href="../day4/Heroku.html">
<i class="fa fa-check"></i> <b>6.3.</b> Heroku
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="7" data-path="day5/README.html">
<a href="../day5/README.html">
<i class="fa fa-check"></i> <b>7.</b> Day Five
</a>
</li>
<li class="chapter " data-level="8" data-path="day6/README.html">
<a href="../day6/README.html">
<i class="fa fa-check"></i> <b>8.</b> Day Six
</a>
<ul class="articles">
<li class="chapter " data-level="8.1" data-path="day6/day6_readings.html">
<a href="../day6/day6_readings.html">
<i class="fa fa-check"></i> <b>8.1.</b> Readings
</a>
</li>
<li class="chapter " data-level="8.2" data-path="day6/Browserify.html">
<a href="../day6/Browserify.html">
<i class="fa fa-check"></i> <b>8.2.</b> Browserify
</a>
</li>
<li class="chapter " data-level="8.3" data-path="day6/Browserify_lab.html">
<a href="../day6/Browserify_lab.html">
<i class="fa fa-check"></i> <b>8.3.</b> Browserify lab
</a>
</li>
<li class="chapter " data-level="8.4" data-path="day6/requirejs.html">
<a href="../day6/requirejs.html">
<i class="fa fa-check"></i> <b>8.4.</b> Require.js
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="9" data-path="day7/README.html">
<a href="../day7/README.html">
<i class="fa fa-check"></i> <b>9.</b> Day Seven
</a>
<ul class="articles">
<li class="chapter " data-level="9.1" data-path="day7/unit_testing.html">
<a href="../day7/unit_testing.html">
<i class="fa fa-check"></i> <b>9.1.</b> Unit Testing
</a>
</li>
<li class="chapter " data-level="9.2" data-path="day7/REST.html">
<a href="../day7/REST.html">
<i class="fa fa-check"></i> <b>9.2.</b> REST
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="10" data-path="day8/README.html">
<a href="../day8/README.html">
<i class="fa fa-check"></i> <b>10.</b> Day Eight
</a>
<ul class="articles">
<li class="chapter " data-level="10.1" data-path="day8/superagent_testing.html">
<a href="../day8/superagent_testing.html">
<i class="fa fa-check"></i> <b>10.1.</b> Test With Super Agent
</a>
</li>
<li class="chapter " data-level="10.2" data-path="day8/mongo_mongoose_and_the_rest.html">
<a href="../day8/mongo_mongoose_and_the_rest.html">
<i class="fa fa-check"></i> <b>10.2.</b> Mongo, Mongoose and the REST
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="11" data-path="day9/README.html">
<a href="../day9/README.html">
<i class="fa fa-check"></i> <b>11.</b> Day Nine
</a>
<ul class="articles">
<li class="chapter " data-level="11.1" data-path="day9/ajax.html">
<a href="../day9/ajax.html">
<i class="fa fa-check"></i> <b>11.1.</b> AJAX
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="12" data-path="day10/README.html">
<a href="../day10/README.html">
<i class="fa fa-check"></i> <b>12.</b> Day Ten
</a>
</li>
<li class="chapter " data-level="13" data-path="ember/README.html">
<a href="../ember/README.html">
<i class="fa fa-check"></i> <b>13.</b> Ember
</a>
</li>
<li class="chapter " data-level="14" data-path="auth_auth/README.html">
<a href="../auth_auth/README.html">
<i class="fa fa-check"></i> <b>14.</b> Auth
</a>
<ul class="articles">
<li class="chapter " data-level="14.1" data-path="auth_auth/basic_authentication.html">
<a href="../auth_auth/basic_authentication.html">
<i class="fa fa-check"></i> <b>14.1.</b> Server Auth
</a>
</li>
<li class="chapter " data-level="14.2" data-path="auth_auth/angular_jwt_basic.html">
<a href="../auth_auth/angular_jwt_basic.html">
<i class="fa fa-check"></i> <b>14.2.</b> Angular Client Auth
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="15" data-path="ec2/README.html">
<a href="../ec2/README.html">
<i class="fa fa-check"></i> <b>15.</b> EC2
</a>
</li>
<li class="divider"></li>
<li>
<a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Generated using GitBook</a>
</li>
</ul>
</div>
<div class="book-body">
<div class="body-inner">
<div class="page-wrapper" tabindex="-1">
<div class="book-progress">
<div class="bar">
<div class="inner" style="width: 89.47368421052632%;min-width: 86.84210526315789%;"></div>
</div>
<div class="chapters">
<a href="../index.html" title="Introduction" class="chapter done new-chapter" data-progress="0" style="left: 0%;"></a>
<a href="../pre-work/README.html" title="Prework" class="chapter done new-chapter" data-progress="1" style="left: 2.6315789473684212%;"></a>
<a href="../communication/connect_to_irc.html" title="Connect to IRC" class="chapter done new-chapter" data-progress="2" style="left: 5.2631578947368425%;"></a>
<a href="../day1/README.html" title="Day One" class="chapter done new-chapter" data-progress="3" style="left: 7.894736842105263%;"></a>
<a href="../day1/ToolsOverview.html" title="JavaScript Tools Overview" class="chapter done " data-progress="3.1" style="left: 10.526315789473685%;"></a>
<a href="../day1/pull_request_practice.html" title="Github Pull Request Practice" class="chapter done " data-progress="3.2" style="left: 13.157894736842104%;"></a>
<a href="../day1/computer_setup.html" title="Computer Setup" class="chapter done " data-progress="3.3" style="left: 15.789473684210526%;"></a>
<a href="../day1/initial_toolchain_practice.html" title="Make sure grunt works" class="chapter done " data-progress="3.4" style="left: 18.42105263157895%;"></a>
<a href="../day2/README.html" title="Day Two" class="chapter done new-chapter" data-progress="4" style="left: 21.05263157894737%;"></a>
<a href="../day2/async_demo.html" title="Async Demo" class="chapter done " data-progress="4.1" style="left: 23.68421052631579%;"></a>
<a href="../day2/hello_express.html" title="Hello Express" class="chapter done " data-progress="4.2" style="left: 26.31578947368421%;"></a>
<a href="../day3/README.html" title="Day Three" class="chapter done new-chapter" data-progress="5" style="left: 28.94736842105263%;"></a>
<a href="../day3/responsive.html" title="Responsive Web Design" class="chapter done " data-progress="5.1" style="left: 31.57894736842105%;"></a>
<a href="../day3/Grunt.html" title="Grunt" class="chapter done " data-progress="5.2" style="left: 34.21052631578947%;"></a>
<a href="../day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html" title="Personal Blog Site Tutorial with Yeoman and Zurb" class="chapter done " data-progress="5.3" style="left: 36.8421052631579%;"></a>
<a href="../day4/README.html" title="Day Four" class="chapter done new-chapter" data-progress="6" style="left: 39.473684210526315%;"></a>
<a href="../day4/acceptance_testing_with_casperjs.html" title="Acceptance Testing with CasperJS" class="chapter done " data-progress="6.1" style="left: 42.10526315789474%;"></a>
<a href="../day4/Sass.html" title="Sass" class="chapter done " data-progress="6.2" style="left: 44.73684210526316%;"></a>
<a href="../day4/Heroku.html" title="Heroku" class="chapter done " data-progress="6.3" style="left: 47.36842105263158%;"></a>
<a href="../day5/README.html" title="Day Five" class="chapter done new-chapter" data-progress="7" style="left: 50%;"></a>
<a href="../day6/README.html" title="Day Six" class="chapter done new-chapter" data-progress="8" style="left: 52.63157894736842%;"></a>
<a href="../day6/day6_readings.html" title="Readings" class="chapter done " data-progress="8.1" style="left: 55.26315789473684%;"></a>
<a href="../day6/Browserify.html" title="Browserify" class="chapter done " data-progress="8.2" style="left: 57.89473684210526%;"></a>
<a href="../day6/Browserify_lab.html" title="Browserify lab" class="chapter done " data-progress="8.3" style="left: 60.526315789473685%;"></a>
<a href="../day6/requirejs.html" title="Require.js" class="chapter done " data-progress="8.4" style="left: 63.1578947368421%;"></a>
<a href="../day7/README.html" title="Day Seven" class="chapter done new-chapter" data-progress="9" style="left: 65.78947368421052%;"></a>
<a href="../day7/unit_testing.html" title="Unit Testing" class="chapter done " data-progress="9.1" style="left: 68.42105263157895%;"></a>
<a href="../day7/REST.html" title="REST" class="chapter done " data-progress="9.2" style="left: 71.05263157894737%;"></a>
<a href="../day8/README.html" title="Day Eight" class="chapter done " data-progress="10" style="left: 73.6842105263158%;"></a>
<a href="../day8/superagent_testing.html" title="Test With Super Agent" class="chapter done " data-progress="10.1" style="left: 76.3157894736842%;"></a>
<a href="../day8/mongo_mongoose_and_the_rest.html" title="Mongo, Mongoose and the REST" class="chapter done " data-progress="10.2" style="left: 78.94736842105263%;"></a>
<a href="../day9/README.html" title="Day Nine" class="chapter done " data-progress="11" style="left: 81.57894736842105%;"></a>
<a href="../day9/ajax.html" title="AJAX" class="chapter done " data-progress="11.1" style="left: 84.21052631578948%;"></a>
<a href="../day10/README.html" title="Day Ten" class="chapter done " data-progress="12" style="left: 86.84210526315789%;"></a>
<a href="../ember/README.html" title="Ember" class="chapter done " data-progress="13" style="left: 89.47368421052632%;"></a>
<a href="../auth_auth/README.html" title="Auth" class="chapter " data-progress="14" style="left: 92.10526315789474%;"></a>
<a href="../auth_auth/basic_authentication.html" title="Server Auth" class="chapter " data-progress="14.1" style="left: 94.73684210526316%;"></a>
<a href="../auth_auth/angular_jwt_basic.html" title="Angular Client Auth" class="chapter " data-progress="14.2" style="left: 97.36842105263158%;"></a>
<a href="../ec2/README.html" title="EC2" class="chapter " data-progress="15" style="left: 100%;"></a>
</div>
</div>
<div class="page-inner">
<section class="normal" id="section-gitbook_38">
<h1 id="learning-ember-via-the-ember-cli">Learning Ember via the Ember CLI</h1>
<p>Here is why I choose to use Ember, and the quickest way to get started.</p>
<h2 id="why-ember-">Why Ember?</h2>
<ul>
<li>You're going to either create your own framework or use someone else's. The
Ember community has thought about a lot of solutions already, saving you time
and money.</li>
<li>Documentation: Ember used to have a reputation for poor documentation, but
now, it's well know that it's much better, (I'm looking at you, Angular). Start
with the <a href="http://emberjs.com/guides/" target="_blank">Ember Guides</a> and I will give you more
resources later.</li>
<li>Yehuda Katz. A core contributor to jQuery, Rails, and other high profile
projects, he is known for high quality software, and sticking around for a long
time to see the project grow. And for the Rails folks in the room, Ember Data
and ActiveModel Serializers are a match made for each other.</li>
<li>Ember embraces web standards. Google, and Angular, has a reputaiton for making
up their own way of doing things. Ember uses Handlebars, ES6 modules, Web Components, etc.
You know if another standard comes out that it will be adoped by Ember.</li>
<li>Ember CLI. The team is really focused on supporting a quick development
workflow through tools like Ember CLI. This cuts out a lot of boilerplate.</li>
<li>For me, Ember is a natural extension of Backbone, without all the setup.
and wiring shit up. There is a clear seperation of concerns which makes it ideal
for a large-scale app.</li>
<li><a href="http://en.wikipedia.org/wiki/Convention_over_configuration" target="_blank">Convention over Configuration</a> decreases the number of design decisions you have to make.</li>
</ul>
<h2 id="why-not-angular-">Why not Angular?</h2>
<p>I'm not trying to single out Angluar in particular, other than that the class I
am preparing this blog post for is presenting both. I don't have any experience
with Angular, so these are all quotes below:</p>
<p><blockquote>"kills the DOM...various ng-attribute references cluttered the page around
and this was mixed with what is called "mustache-esque" template bindings."
</blockquote>
<a href="http://ryantablada.com/post/why-i-chose-ember-js" target="_blank">source</a></p>
<p><blockquote>Angular's creator describes it as a metaframework - a framework for
creating your application's framework. Thus, if you get two different Angular
apps, their internals will look completely different.</p>
<p>This is not the approach Ember takes, where you buy in to the framework's
conventions. So, one could argue that once you learn the conventions, you'll
spend much less time on boilerplate writing a new Ember app than a new Angular
app. This doctrine also belongs to Rails, and it's worked out pretty well for
them.
</blockquote>
<a href="http://discuss.emberjs.com/t/how-do-we-beat-angularjs-in-the-developers-mindset/3948/3" target="_blank">source</a></p>
<p>To dive deeper, read <a href="http://www.benlesh.com/2014/04/embular-part-1-comparing-ember-and.html" target="_blank">A Five Part Blog Post Series Comparing Angular and Ember</a>
and <a href="http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/" target="_blank">Backbone, Angular, or Ember</a>.</p>
<p>Angular vs Ember <a href="https://docs.google.com/presentation/d/1e0z1pT9JuEh8G5DOtib6XFDHK0GUFtrZrU3IfxJynaA/preview?slide=id.g177e4bd2b_0148" target="_blank">slides</a>.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>You'll need the following modules if you don't have them already</p>
<pre><code>npm install -g phantomjs bower
</code></pre><h2 id="installation">Installation</h2>
<p>First step is to install the command line tool globally:</p>
<pre><code>npm install -g ember-cli
</code></pre><p>Then, install the <a href="https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi" target="_blank">Ember Chrome Extension</a>.</p>
<h2 id="kicking-the-tires">Kicking the Tires</h2>
<p>Examine carefully the output of the help option for the <code>ember</code> command.</p>
<pre><code>ember --help
</code></pre><h2 id="our-first-app-setup">Our First App Setup</h2>
<pre><code>ember new emberNotes
cd emberNotes
ember serve
</code></pre><p>Take a look (in your editor) at <code>app/templates/application.hbs</code>. Go ahead and
change the <code>h2</code> element to "Welcome to Notes" or something similar. The
<code>{{outlet}}</code> tag is where our content will end up.</p>
<h1 id="generating-more">Generating More</h1>
<p>Browse to the <a href="https://github.com/cavneb/loom-generators-ember-appkit/tree/master/loom/generators" target="_blank">List of Ember Generators</a>.</p>
<pre><code>ember g model note
ember g controller notes
ember g template note
ember g route index
</code></pre><p>Edit <code>app/routes/index.js</code>:</p>
<ol>
<li>Include a model attribute of the route, that points to:</li>
<li>A dummy data variable</li>
</ol>
<pre><code class="lang-javascript">import Ember from <span class="hljs-string">'ember'</span>;
export <span class="hljs-keyword">default</span> Ember.Route.extend({
model: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
<span class="hljs-keyword">return</span> data.result;
}
});
<span class="hljs-keyword">var</span> data = {
<span class="hljs-string">"status"</span>: <span class="hljs-string">"ok"</span>,
<span class="hljs-string">"result"</span>: [
{ noteBody: <span class="hljs-string">"Twilight Sparkle"</span>},
{ noteBody: <span class="hljs-string">"Applejack"</span>},
{ noteBody: <span class="hljs-string">"Fluttershy"</span>},
{ noteBody: <span class="hljs-string">"Rarity"</span>},
{ noteBody: <span class="hljs-string">"Pinkie Pie"</span>},
{ nodeBody: <span class="hljs-string">"Rainbow Dash"</span>}
]
};
</code></pre>
<p>And, in <code>app/templates/index.hbs</code>:</p>
<pre><code>{{#each this}}
<li>{{noteBody}}</li>
{{/each}}
</code></pre><p>Now, let's add images to your data. Add a picture attribute, something like this:</p>
<pre><code>"result": [
{
noteBody: "Twilight Sparkle",
picture: "http://img4.wikia.nocookie.net/__cb20140420032412/mlp/images/thumb/e/e0/Twilight_Sparkle_after_drying_herself_S1E03.png/209px-Twilight_Sparkle_after_drying_herself_S1E03.png"
},
{
noteBody: "Applejack",
picture: "http://img3.wikia.nocookie.net/__cb20121029101939/mlp/images/thumb/e/ee/Applejack_proud_of_herself_S1E01.png/209px-Applejack_proud_of_herself_S1E01.png"
},
]
</code></pre><p>and in your <code>index.hbs</code></p>
<pre><code>{{#each this}}
<li>
<img {{bind-attr src="picture"}} />
{{noteBody}}
</li>
{{/each}}
</code></pre><p>Now, with more Ponies!</p>
<h2 id="two-way-data-binding">Two-way Data Binding</h2>
<p>in index.hbs</p>
<pre><code><div>
{{input type="text" value=name placeholder="Enter your pony name"}}
</div>
<div>
<p>Hello, my pony name is: <b>{{name}}</b>, and I think Ember is great!</p>
</div>
</code></pre><h2 id="more-on-ember-cli">More on Ember CLI</h2>
<ul>
<li><a href="http://iamstef.net/ember-cli/" target="_blank">Ember CLI docs</a></li>
<li><a href="https://www.youtube.com/watch?v=Hm8XsgKT0Qw" target="_blank">Prototyping an Ember App in 20 minutes</a></li>
</ul>
<h2 id="top-ten-resources-for-staying-up-to-date-on-ember">Top Ten Resources for Staying Up to Date on Ember</h2>
<ul>
<li><a href="http://emberjs.com/guides/" target="_blank">http://emberjs.com/guides/</a></li>
<li><a href="http://emberwatch.com" target="_blank">http://emberwatch.com</a></li>
<li><a href="https://emberflare.com" target="_blank">https://emberflare.com</a></li>
<li><a href="http://www.embercasts.com" target="_blank">http://www.embercasts.com</a></li>
<li><a href="http://www.confreaks.com/events/emberconf2014" target="_blank">http://www.confreaks.com/events/emberconf2014</a></li>
<li><a href="http://emberweekly.com" target="_blank">http://emberweekly.com</a></li>
<li><a href="https://www.codeschool.com/courses/warming-up-with-ember-js" target="_blank">https://www.codeschool.com/courses/warming-up-with-ember-js</a></li>
<li><a href="http://pluralsight.com/training/courses/TableOfContents?courseName=fire-up-emberjs" target="_blank">http://pluralsight.com/training/courses/TableOfContents?courseName=fire-up-emberjs</a></li>
<li><a href="https://courses.tutsplus.com/courses/lets-learn-ember" target="_blank">https://courses.tutsplus.com/courses/lets-learn-ember</a></li>
<li><a href="http://voidcanvas.com/emberjs-tutorial-two-way-data-binding/" target="_blank">http://voidcanvas.com/emberjs-tutorial-two-way-data-binding/</a></li>
</ul>
<p>And if you're a Rails dev, too:</p>
<ul>
<li><a href="https://emberbites.com" target="_blank">https://emberbites.com</a></li>
</ul>
</section>
</div>
</div>
</div>
<a href="../day10/README.html" class="navigation navigation-prev " aria-label="Previous page: Day Ten"><i class="fa fa-angle-left"></i></a>
<a href="../auth_auth/README.html" class="navigation navigation-next " aria-label="Next page: Auth"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="../gitbook/jsrepl/jsrepl.js" id="jsrepl-script"></script>
<script src="../gitbook/app.js"></script>
<script src="http://cdn.mathjax.org/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
<script>
require(["gitbook"], function(gitbook) {
var config = {};
gitbook.start(config);
});
</script>
</body>
</html>
