Ember controller

Starting with this article and entering Chapter 5 controllers, controller are becoming more streamlined and have more single responsibilities at E mber2.0 -- processing logic.

Here's the preparation. Re-create an Ember project and still use the Ember CLI command to create it.

ember new chapter5_controllers
cd chapter5_controllers
ember server

When you execute a project in your browser, you see the following information to indicate that the project was successfully built. Welcome to Ember 。

1. Introduction to the controller

The controller is very similar to the component, so it is likely that the component will completely replace the controller in a new release in the future, and it is likely that Ember will exit ember as the updated controller in the Ember version. The components in the current version are not yet accessible directly through routing and need to be called by templates to use the controller may actually exit Ember by then!

That's why controllers are rarely used in modular Ember controller Even with controller there are two things you can do:

controller primarily designed to maintain the current routing state. In general, the properties of the model are saved to the server, but controller of the controller are not saved to the server.
The action on the component needs to controller the controller layer to route layer.

The rendering of the template context is controller route of the current controller. Ember follows the philosophy that "convention is better than configuration," which means that if you controller you create one, not everything for "work-friendly."

The following example is the demo route display blog post Suppose the blog-post used to present blog-post and contains the following id the model not need to be id the model):

title
intro
body
author

model defined as follows:

//  app/models/blog-post.js
import DS from 'ember-data';
export default DS.Model.extend({
  title: DS.attr('string'),  //  属性默认为string类型，可以不指定
  intro: DS.attr('string'),
  body: DS.attr('string'),
  author: DS.attr('string')
});

Add route at the route layer and return a model object model

//  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',  //  属性默认为string类型，可以不指定
            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'
        });
        // 直接返回一个model，或者你可以返回promises，
        return blogPost;
    }
});

The template for displaying information is as follows:


<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
<div class="intro">
    {{model.intro}}
</div>
<hr>
<div class="body">
    {{model.body}}
</div>

If your code is not written incorrectly, you will also get the following results:

Ember controller

Welcome to Ember is the information for the main template, {{outlet}} which you application.hbs but remember not to delete the information, otherwise nothing will be displayed.

In this example, no specific property or specified action is action A t this point, the role of the controller's model property is simply the pass-through of the model property. Note: The model obtained by model is route route.

Here's an added feature to this example: Users can click on the title to trigger the display or hide post the post. With a property isExpanded code for the template and controller is modified separately below.

//  app/controllers/blog-post.js
import Ember from 'ember';
export default Ember.Controller.extend({
    isExpanded: false,  //默认不显示body
    actions: {
        toggleBody: function() {
            this.toggleProperty('isExpanded');
        }
    }
});

Add controller property to the isExpanded which is also controller you do not define this property in the controller. For an controller this controller code, see Ember.js the 15th (action) assistant of the Getting Started Guide.


<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
<div class="intro">
    {{model.intro}}
</div>
<hr>
{{#if isExpanded}}
    <button {{action 'toggleBody'}}>hide body</button>
    <div class="body">
        {{model.body}}
    </div>
{{else}}
    <button {{action 'toggleBody'}}>Show body</button>
{{/if}}

Use the if assistant in the template to determine the value isExpanded and true is body otherwise it is not displayed.

The result after the page loads is as follows, body content is not displayed, the button "Show body" is clicked to display the content, and the button becomes "hide body". Then click this button and the body content will body displayed.

Ember controller

By this controller responsibilities you should have a general understanding, the main role is logical judgment, processing, such as in this example body content, in fact, you can also put the controller code in the controller class route class can also achieve this model to return as a model isExpanded model model processing), please let the reader do it themselves, but put the logic route will make the route route single", route main responsibility is to initialize the data. I think that's one of the controller still keeps controllers!!

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!

Table of contents

1. Introduction to the controller

Cookie Consent