Ember.js Getting Started Guide--Controllers (Controller)

Ember New CHAPTER5_CONTROLLERSCD Chapter5_controllersember Server

from the beginning of this chapter to the fifth controller, controllers in the Ember2.0 began to be more and more streamlined, the responsibility is more single - processing logic.

The following is the preparation work.

Create a new the Ember project, still using the Ember CLI command, was created.

To execute the project in the browser, see the following information stating that the project was built successfully.

Welcome to Ember

1, Controller Introduction

The controller is very similar to the component, and as a result, it is likely that the components will completely replace the controller in future releases, most likely with the Ember version of the update controller will exit Ember. Components in the current version cannot be accessed directly via a template call to use the component, but future versions will solve the problem, and the controller may actually exit from Ember !

because of this, the modular The controller is seldom used in Ember applications . Even the controller is used to deal with the following two things:

1. The controller is primarily designed to maintain the current routing state. In general,the properties of the model are saved to the server, but the controller's properties are not saved to the server.

2. the action on the component needs to go through the controller layer to the route layer.

The rendering of the template context is handled by the routing of the current controller . the idea behind the Ember is that " engagement is better than configuration ," which means that if you only need a controller you create one, not everything . easy to work ".

The following example is a demo route that displays a blog post. Assume that the template blog-post is used to present the data of the model Blog-post, and that the model contains the following attributes (implied property ID, because in model there is no need to manually specify ID attribute):

• Title

• Intro

• Body

• Author

The model is defined as follows:

App/models/blog-post.js import DS from ' Ember-data '; Export default DS. Model.extend ({title:DS.attr (' string '),//property defaults to String type, can not specify Intro:DS.attr (' string '), Body:DS.attr (' string '), a Uthor:DS.attr (' string ')});

Add test data to the route layer and return a model object directly.

  app/routes/blog-post.js import Ember from  ' Ember ';  export default  ember.route.extend ({       model: function ()  {               var blogPost =  This.store.createRecord (' Blog-post ', {                      title:  ' Defining a component ', The   //   property defaults to a string type, and you can specify no                       intro:  "Components must have  at least one dash in their name.  ",                      body:  " Components must have at least one dash in their name. So blog-post is an  Acceptable name, and so is audio-player-controls, but post is not . this prevents clashes with current or future html element  Names, aligns ember components with the w3c custom elements spec,  and ensures ember detects the components automatically. ",                       author:  ' Ubuntuvim '                });              //  Return directly to a model, or you can return to promises,               return blogpost;       }}); 

The template for displaying the information is as follows:

<!--App/templates/blog-post.hbs--<H1>{{MODEL.TITLE}}</H1><H2>{{MODEL.AUTHOR}}</H2 > <div> {{model.intro}}</div> 
 
If your code is not written incorrectly then you will get the following result:
 
 
"Welcome to Ember" is the main template information, you can delete it in Application.hbs , but remember not to delete {{outlet}}, otherwise what information will not be displayed. 
 
 
This example does not show any specific attributes or specified actions (action). At this point, the role of the controller's Model property is simply the "pass-through"(or proxy) of the properties of the models. 
 
Note: the model obtained by the controller is obtained from the route . 
 
 
 The following adds a feature to this example: the user can click on the title to trigger the display or hide the post content. With a property isexpanded Control, the following sections modify the template and controller code, respectively. 
 
//  app/controllers/blog-post.js import  Ember from  ' Ember ';  export default ember.controller.extend ({        isexpanded: false,  //default does not show body        actions: {               Togglebody: function ()  {                      this.toggleproperty (' isexpanded ');               }       } });
 
         add an attribute to  controller isexpanded If you do not define this attribute in  controller controller code, see the  ember.js  into   gate   Guide --{{action}}  assistant  ". 
 
 
 Use the if helper in the template to determine the value of the isexpanded , or true to display Body , otherwise it is not displayed.  
 
after the page loads the results are as follows: First , the body content is not displayed , the button "show Body" is displayed, and the button becomes "Hide Body". Then clicking on this button does not show the body content. 
 
 
 
 
to this controller 's responsibilities you should generally understand, its main role is the logic of judgment, processing, such as the example here to determine the body content display or not, in fact, you can also put controller  The processing code in the class can also be implemented in the route class, but it is returned as a property of the Model ( isexpanded is treated as the model  property), Ask the reader to try it yourself, but putting logic on the route will make the  route " not exclusive" , andthe primary responsibility of the route is to initialize the data. I think this is one of the reasons why Ember still has a controller! ! 
 

Ember.js Getting Started Guide--Controllers (Controller)