Ember Engineering Basic Configuration

In the previous article, we basically built a project. As mentioned above, the EMBER-CLI plugin is based on broccoli.js for resource management and directory structure management, so it is important for us to understand the directory structure, and we still talk about some common configurations. Ember Project directory structure

When using ember new <project-name>, your directory structure will be played out as follows:

In simple terms, as shown below, the files that are more important (or need to be modified) are marked in red:

2 files are highlighted here
Environment.js and Ember-cli-build.js
and incidentally. Jshintrc,route.js environment.js

This file, as the name implies, is primarily used to configure and environment-related content, starting with the following:

/* Jshint node:true *
/module.exports = function (Environment) {
  var ENV = {
    moduleprefix: ' Ember-demo ',
    Environment:environment,
    rooturl: '/',
    locationtype: ' Auto ',
    emberenv: {
      FEATURES: {
      }
    },
    APP: {
    }
  };

  if (Environment = = = ' Development ') {
  }

  if (environment = = = ' Test ') {
    //Testem prefers
    this ... Env.locationtype = ' None ';

    Keep test Console output quieter
    ENV. APP. Log_active_generation = false;
    Env. APP. Log_view_lookups = false;

    Env. app.rootelement = ' #ember-testing ';
  }

  if (Environment = = = ' production ') {
  }
  return ENV;
};

(1) Environment
Environment, there are three values: production development test,
(2) Rooturl
Root path, default to '/',
(3) LocationType
The rule used to represent the URL, there are 4 rules hash history auto None.

Now that you have spoken of this, you can say route.js in passing. This file, is used to do routing management, of which there are two variables localtion rooturl, generally, we will be here, configure a bit. As follows:

Import Ember from ' Ember ';
Import config from './config/environment ';

Const Router = Ember.Router.extend ({
  location:config.locationType,
  RootURL:config.rootURL
});
Router.map (function () {
});
Export default Router;

You can see that the configuration here is taken from Environment.js.
Simply say the meaning of several values of LocationType.
Take the following route as an example:

Router.map (function () {
  This.route (' posts ', function () {
    this.route (' new ');
  });

It means that the path post has a self-path new
-Hash,url to/#/post/new
-History,url to/posts/new
-None, this is a special situation, refers to the URL will never change, instant jump, that is, Ember will not save the application's routing state, this general situation when the test will be used
-Auto,ember will choose the most supported way of the browser, generally hash or history, for example, under IE9, will choose the hash.

(4) Emberenv
Emberenv has an important attribute features, which is mainly used to control the new features, only the configuration can be used, about the configuration here, I am not very understanding. According to the official documentation, the individual understands this:
There are new feature in the Features.json, but they are not all can be used directly, their state is divided into several: false, that does not exist and can not be used, no matter how, will not appear in the formal construction of true, exists and can be used directly, Null can be present directly in the formal build, but cannot be used directly, need to be opened, only Canary version and beta version

For an attribute that exists but cannot be directly null, we need to use it manually, in the attribute features.
Example:

var ENV = {
  emberenv: {
    FEATURES: {
      ' link-to ': True
    }
  }
};

There is a way to directly open all that is to set ENV.EmberENV.ENABLE_ALL_FEATURES to true.

This part, the old couple also can not fully understand, we may see the original document: Ember feature

(5) APP
Here are some configuration items, for example, if the domain name of the asynchronous request is inconsistent, you can configure it here:

app:{
    serverdomain: ' Http://you.domain '
}
if (environment = = = ' Development ') {
    ENV. app.serverdomain= ' http://you.domain:8080 ';
}
if (Environment = = = ' Test ') {
    ENV. app.serverdomain= ' http://you.domain:8080 ';
}
if (Environment = = = ' production ') {
    ENV. app.serverdomain= ' http://you.domain:8080 ';
}

When you use it, just introduce yourself:

Import env from ' your-application-name/config/environment ' let
result = Ember.$.getjson (env. App.serverdomain). Then (Result) = {return result});

Ember-cli-build.js

This file is primarily used to manage three-party resources.
First look at the basic configuration, the configuration items at the time of construction:
The default is:

var Emberapp = require (' Ember-cli/lib/broccoli/ember-app ');
Module.exports = function (defaults) {
    var app = new Emberapp (defaults,{
    });
}

It is important to note that if you need to upload to a CDN after you have packaged it, you will need to add some configuration:

var Emberapp = require (' Ember-cli/lib/broccoli/ember-app ');
Module.exports = function (defaults) {
    var app = new Emberapp (defaults,{
        //Your CDN address, note that this, only in the production environment will take effect, That is, in the construction of the use of ember build--production
        prepend: ' Http://path ',
        //whether to use MD5, if NULL is not necessary, Then the production of the file is Your-application-name.js,vendor.js and your-application-name.css,vendor.css, if it is a string, then that name, otherwise, MD5, The resulting file resembles: Your-application-name-dc477601773d4043b0c461b2a0ae8aef.js, not listed.
        customhash:null
    });
}

In Ember, the recommended package management tool is bower, for example, if we introduce a three-party package, taking the most commonly used bootstrap as an example,
Bower Install Bootstrap
In addition to this approach, you can also put files directly into the vendor directory.

After the package is downloaded or copied, it is not finished and must be configured in Ember-cli-build.js:

    App.import (' vendor/package/package/a.css ');
    App.import (' bower_component/bootstrap/dist/css/bootstrap.min.css ');

The above can be automatically built into the Build/asserts directory at the time of construction. The following is mainly about the structure of the directory app

This folder, which makes our most important folder, where our code will be placed underneath it, his directory structure is as follows:

As stated above, Ember is based on the management of the directory structure of Broccoli.js, so the structure is also very clear. various folders

Components controllers helpers models routes corresponds to the corresponding concept in Ember, which is the Component Controller helper model route. Where template is placed in templates, the structure is similar to the above, when using the EMBER-CLI command-line tool to create components and routes, in the corresponding directory, the template file is created, others do not.
For example, when you use
Ember G Component A/b, the Components/a/b.js Template/components/a/b.hbs is created. The other same. App.js&resolver.js

These two files generally do not need to be changed
Resolver.js mainly refers to the Ember-resolver resolver, is to use ES6 rewrite a bit resolver.
App.js is primarily used to build, and can automatically introduce built-in files.
I don't know much about either of them, and it's great that a great God can explain it. index.html

This file, which is the outermost parent template, which is the root DOM, has several parts to note.

The 1th is: There are several introduced files, respectively, Vendor.css, <project-name>.css, Vendor.js, <project-name>.js, this several files are compiled after the generated file. where {{Rooturl}} is the variable in environment JS, the default is/no change is required. If it is uploaded to a CDN, it will be replaced in the production environment after it is configured in Ember-cli-build.js.

The 2nd is: {{content-for}}. Here is a helper {{content-for}},{{content-for}} is a hook for plug-ins, which allows the plugin to insert elements into it. This is written in EMBER-CLI's documentation:

The app/index.html file lays the foundation for your application. This is where the basic DOM structure was laid out, the title of attribute is set, and Stylesheet/javascript includes was done . In addition to this, app/index.html includes multiple hooks-{{content-for ' head '}} and {{content-for ' body '}}-that can be used by addons to inject content into your application ' s head or body. These hooks need to being left in place for your application to function properly however, they can safely, ignored unless You is directly working with a particular addon.

In the case of {{content-for ' head '}, EMBER-CLI will add <meta name= "Appname/config/environment" > This head, if you delete this helper, Then there will be an error.

In the same vein, {{content-for ' body '}} This will insert App\templates\application.hbs into it. That is, the body, so that we focus on the main content. App\templates\application.hbs

There is a need to say more about this document. As mentioned above, this file is actually body, all of our templates are rendered here, in order to achieve such dynamic rendering, we also need to install a plug-in Liquid-fire liquid-fire.
First is the installation: NPM install--save-dev Liquid-fire
After the installation is complete, add the file app/transitions.js. This file defines the rendering rules. At the same time, also added some helper, for Liquid-if liquid-with Liquid-outlet link-to. Because the normal helper does not render this concept.
For example, we can write our Application.hbs.

{{Liquid-outlet class= ' Body-class '}}
or {{Liquid-box class= "Body-class"}}

Then each of our generated route will be rendered here.
App/transitions.js? defines how to render, say, the following:

Export default function () {
  this.transition (
    this.fromroute (' route.route1 '),
    this.toroute (' Route.route2 '),
    this.use (' toright '),
    this.reverse (' ToLeft '),
  );
}

When you change from Route route1 to Route2, there is a left-to-right animation, and conversely, when Zi Lu changes from route2 to Route1, there is a right-to-left animation. If this is not written, then it is a direct replacement. There are, of course, some high-level rules that you can look at. Other content

For example, if you want to modify the port (default is 8000), you only need to modify the. ember-cli file, as follows:
{"Port": 8080}
To cancel the integration of the prototype chain, the array string in Ember is integrated with the original prototype chain, there are some additional methods and properties, which are inherited by default, that is, you create the same thing in the following way

Let A = [n/a];
Let B = ember.a ([+]);

A.includes (1);//true
b.includes (1);//true

Disable as follows, modify Config/environment.js

ENV = {
  emberenv: {
    extend_prototypes:false//all disable
    /**
    * Partially disable
    extend_prototypes: {
      String: False,
      array:true
    }*/
  }
}

Note that if it is disabled, then you will not enjoy the benefits of a couple of two-way bindings, such as using {{#each}} to iterate over an array, which is not perceptible if it changes. It is recommended that you use EMBER.A to initialize data without disabling inheritance.

https://guides.emberjs.com/v2.11.0/configuring-ember/configuring-your-app/
https://guides.emberjs.com/ v2.11.0/configuring-ember/configuring-ember-cli/
https://guides.emberjs.com/v2.11.0/configuring-ember/ disabling-prototype-extensions/
https://guides.emberjs.com/v2.11.0/configuring-ember/specifying-url-type/
Https://www.airpair.com/ember.js/posts/animations-in-emberjs-with-liquidfire
https://ember-cli.com/ user-guide/