Web App Development Book: Guide to Ember.js

101 Pages·2016·0.35 MB·English

by  David V.

Web App Development Book

Guide to Ember.js

David V.

Copyright©2016 by David V

All Rights Reserved
Copyright © 2016 by David V

All rights reserved. No part of this publication may be reproduced, distributed,
or transmitted in any form or by any means, including photocopying, recording,
or other electronic or mechanical methods, without the prior written permission
of the author, except in the case of brief quotations embodied in critical reviews
and certain other noncommercial uses permitted by copyright law.
Table of Contents
Introduction
Chapter 1- Controllers
Chapter 2- Models
Chapter 3- Application Concerns
Conclusion
Disclaimer

While all attempts have been made to verify the information provided in
this book, the author does assume any responsibility for errors, omissions,
or contrary interpretations of the subject matter contained within. The
information provided in this book is for educational and entertainment purposes
only. The reader is responsible for his or her own actions and the author does not
accept any responsibilities for any liabilities or damages, real or perceived,
resulting from the use of this information.

The trademarks that are used are without any consent, and the publication
of the trademark is without permission or backing by the trademark owner.
All trademarks and brands within this book are for clarifying purposes only
and are the owned by the owners themselves, not affiliated with this
document.
Introduction

There is an increase in the demand for web apps. Ember JS is a JavaScript which
can assist in development of such apps. The framework is easy to learn, and
especially for JavaScript experts. However, even if you are not good in
JavaScript at all, you don’t have to worry, as the explanations in this book are
very easy for you to understand. With this JavaScript, you can create web apps
with very interactive user interfaces, and your users will definitely like your
apps.
Chapter 1-Controllers

Controllers are much like components, and it is believed that these will be
replaced by components in the future.

In most of the current apps, controllers are not used much. When they are used,
they are tasked with the following responsibilities:
1. Used for maintaining state based on the route in use currently.

2. When the user actions are passing from a component to a route, they
have to pass through a controller.

We need to demonstrate this by use of a route which will help us display a blog
post.

The template will be bound to the following properties in the template: <h1>
{{model.title}}</h1> <h2>by {{model.author}}</h2> <div class="intro">
{{model.intro}}
</div>
<hr>
<div class="body"> {{model.body}}
</div>

As shown in the above example, we do not have specific properties or actions to
display.

Suppose that we need to add a feature which will allow the user to toggle
between the displays of your body sections. For us to implement this, we would
modify the code to the following: <h1>{{model.title}}</h1> <h2>by
{{model.author}}</h2> <div class='intro'> {{model.intro}}
</div>
<hr>
{{#if isExpanded}}
<button {{action "toggleBody"}}>Hide the Body</button> <div
class="body"> {{model.body}}
</div>
{{else}}
<button {{action "toggleBody"}}>Show the Body</button> {{/if}}

In the “actions” hook of our controller, we can define what our action will be
doing as we can do it with a component. This is shown in the code given below:
export default Ember.Controller.extend({
actions: {
toggleBody() {
this.toggleProperty('isExpanded'); }
}
});
Management of Dependencies between Controllers
Sometimes, when we are nesting resources, we usually need to establish a
connection between two controllers. Consider the router given below:
Router.map(function() {
this.route('post', { path: 'p:post_id' }, function() {
this.route('comments', { path: '/comments' }); });
});

On visiting the URL “/posts/1/comments,” the model “post” will be loaded into
the model of the PostController. However, some information related to it might
be displayed in the template for “comments.”

For us to do this, we have to inject the “pController” into our
“CommentsController.” This is shown below: export default
Ember.Controller.extend({
pController: Ember.inject.controller('post') });

Our comments will be in a position to access the “PController,” which is a read-
only alias which can be used for reading the model from the controller. Consider
the code given below: export default Ember.Controller.extend({