Ember's assistant

1, link-to assistant for regular use

link-to assistant expression is rendered with an a label. T he a the a href property is generated based on the route and is closely related to the routing settings. A nd the route names for each setting have a corresponding relationship. T o demonstrate the effect, command to generate a route manually create a file) and get test data. This article combined with routing settings, casually talked about some of the routing knowledge, if you can understand the best, do not understand also do not matter after there will be a whole chapter on routing.

1, add subrouting

//  app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
  location: config.locationType 
});
Router.map(function() {
  this.route('posts', function() {
    this.route('detail', {path: '/:post_id'});  //指定子路由，:post_id会自动转换为数据的id
  });
});
export default Router;

As in the code above, posts a subrouting detail under detail A nd specify that the /:post_id :post_id a dynamic field that typically model id model. After the template is rendered, you get posts/1 posts/2

2, initialize the data in the route

//  app/routes/posts.js
import Ember from 'ember';
export default Ember.Route.extend({
    model: function() {
        return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
    }
});

Use the methods provided by Ember to get test data directly from remote sources. The format of the test data can be seen by opening the URL above directly from the browser.

3, add the displayed template

<div class="container">
    <div class="row">
        <div class="col-md-10 col-xs-10">
            <div style="margin-top: 70px;">
                <ul class="list-group">
                {{#each model as |item|}}
                    <li class="list-group-item">
                        
                     {{#link-to 'posts.detail' item}}
                            {{item.title}}
                        {{/link-to}}
                    </li>
                {{/each}}
                </ul>
            </div>
        </div>
    </div>
</div>

{{#each}} the data directly with . . . #each . The following image is part of the result:

We looked at the source code of link-to assistant rendered it, router.js post_id rendering post_id was id of the model

If you don't have test data, you can link-to post_id directly, and you can id value of link-to assistant. Add the following code to the next line of the ul label of the link-to as 1 id 1

  <li class="list-group-item">
    {{#link-to 'posts.detail' 1}}增加一条直接指定id的数据{{/link-to}}
  </li>

The HTML code after rendering is as follows:

<li class="list-group-item">
<a id="ember404" href="/posts/1" class="ember-view">增加一条直接指定id的数据
</a>
</li>

You can see that the format of href after the previous rendering with dynamic data is the same. If you want a an a label to be active, you can add a CSS class class=”active”

2, link-to assistant sets up multiple dynamic fields

In development, the path of a route is often not post/1 or it can be post/1/comment post/1/2 post/1/comment/2 I f this form of URL is link-to assistant? A s always, test data needs to be built and the corresponding routing settings link-to modified before the template can be !!! This has to be remembered...

1. There is a multi-child route under a route

//  app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
  location: config.locationType 
});
Router.map(function() {
  // this.route('handlebarsConditionsExpRoute');
  // this.route('handlebars-each');
  // this.route('store-categories');
  // this.route('binding-element-attributes');
  //  link-to实例理由配置
  // this.route('link-to-helper-example', function() {
  //  this.route('edit', {path: '/:link-to-helper-example_id'});
  // });
  this.route('posts', function() {
      //指定子路由，:post_id会自动转换为数据的id
    this.route('detail', {path: '/:post_id'}, function() {
      //增加一个comments路由
      this.route('comments');
      // 第二个子路由comment，并且路由是个动态字段comment_id
      this.route('comment', {path: '/:comment_id'});
    });
  });
  
});
export default Router;

In the case of the above configuration, the routing format posts/detail/comments B ecause getting remote data is slow and directly posts.js model .js, you use the write-dead id method directly. N ote: In the above configuration, there are two subroutes under route detail one is comments one comment and this is a dynamic segment. T here should be 2 forms of URL after rendering of this template. O ne is posts.detail.comments posts/1/comments the other posts.detail.comment posts/1/2 If you can understand this route nesting level more should also be able to see clearly!

<div class="container">
    <div class="row">
        <div class="col-md-10 col-xs-10">
            <div style="margin-top: 70px;">
                <ul class="list-group">
                    
                    <li class="list-group-item">
                        
                        {{#link-to 'posts.detail.comments' 1 class='active'}}
                        posts.detail.comments（posts/1/comments）形式
                        {{/link-to}}
                    </li>
                    <li class="list-group-item">
                        
                        {{#link-to 'posts.detail.comment' 1 2 class='active'}}
                        posts.detail.comment（posts/1/2）形式
                        {{/link-to}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

The result after rendering is as follows:

If the dynamic segment is generally replaced by the id model if it is not the route name configured for the direct display of the dynamic segment.

2, multi-layer routing nesting

The above shows the case of multiple subroutings, and the following is a description of a route that has multiple levels and consists of multiple dynamic and non-dynamic segments. F irst modify the route configuration and set comments detail of the detail. And comments the subrouting of a dynamic segment comment_id

//  app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
  location: config.locationType 
});
Router.map(function() {
  this.route('posts', function() {
      //指定子路由，:post_id会自动转换为数据的id
    this.route('detail', {path: '/:post_id'}, function() {
      //增加一个comments路由
      this.route('comments', function() {
        // 在comments下面再增加一个子路由comment，并且路由是个动态字段comment_id
        this.route('comment', {path: '/:comment_id'});
      });   
    });
  });
});
export default Router;

The template uses the posts.detail.comments.comment Normally, you should posts/1/comments/2

<div class="container">
    <div class="row">
        <div class="col-md-10 col-xs-10">
            <div style="margin-top: 70px;">
                <ul class="list-group">
                    <li class="list-group-item">
                        
                        {{#link-to 'posts.detail.comments.comment' 1 2 class='active'}}
                        posts.detail.comments.comment（posts/1/comments/2）形式
                        {{/link-to}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

The HTML that is rendered is as follows:

<ul class="list-group">
  <li class="list-group-item">
  
    <a id="ember473" href="/posts/1/comments/2" class="active ember-view">                      posts.detail.comments.comment（posts/1/comments/2）形式
    </a>
  </li> 
</ul>

The result is a 4-layer route /posts/1/comment/2 S upplemental content. You can also set up routes and templates in the following way for the second multi-tier routing nesting above, and you can /posts/1/comments /posts/1/comments/2

  this.route('posts', function() {
      //指定子路由，:post_id会自动转换为数据的id
      this.route('detail', {path: '/:post_id'}, function() {
          //增加一个comments路由
          this.route('comments');
          // 路由调用：posts.detail.comment
          // 注意区分与前面的设置方式，detai渲染之后会被/:post_id替换，comment渲染之后直接被comments/:comment_id替换了，
          //会得到如posts/1/comments/2这种形式的URL
          this.route('comment', {path: 'comments/:comment_id'});
    });
  });

<div class="container">
    <div class="row">
        <div class="col-md-10 col-xs-10">
            <div style="margin-top: 70px;">
                <ul class="list-group">
                    <li class="list-group-item">
                        
                    {{#link-to 'posts.detail.comments' 1 class='active'}}
                        posts.detail.comments（/posts/1/comments）形式
                        {{/link-to}}
                    </li>
                    <li class="list-group-item">
                        
                        {{#link-to 'posts.detail.comment' 1 2 class='active'}}
                        posts.detail.comments.comment（posts/1/comments/2）形式
                        {{/link-to}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

The result after rendering is as follows:

The results of routing rendering are the same in both ways, and the way you define them is very flexible, depending on what the individual likes. T he first way to define it looks clearer, and if you look at the code, you know it's layer by layer. B ut you need to write more code. T he second definition is more concise, but does not see the nested hierarchy. It doesn't matter if you don't understand the above-mentioned routing settings, there will be an entire chapter that describes routing, but you can understand that routing settings in conjunction with the link-to assistant is very helpful for learning later routing chapters.

3, add additional properties to the link-to assistant

handlebars you to add additional link-to assistant, and a has additional properties after the template is rendered. For example, you can a of CSS to the class

{{link-to "show text info" 'posts.detail' 1 class="btn btn-primary"}}
{{#link-to "posts.detail" 1 class="btn btn-primary"}}show text info{{/link-to}}

Both of these writings are possible, and the rendering results are the same. The HTML after rendering is:

<a id="ember434" href="/posts/1" class="btn btn-primary ember-view">show text info</a>

Note: The positions of the parameters set by the writing of the above two methods cannot be changed. B ut the official website did not see this description, there may be a problem with my demo example, if readers you can be welcome to leave me a message. T he first way, the displayed text must be placed first, and the middle parameter is the routing setting, the most important argument is the additional property setting, if you want other properties need to be set still can only be placed on the last side. T he parameter position of the second chapter is also required, the first parameter must be route setting, and the subsequent parameter settings additional properties. F or post-rendered HTML code that the label id is ember or ember-xxx these properties are generated by Ember by default, and we can ignore it for the time being. S ynthesis, originally this link-to but because of the configuration of the route route on the way by the way, a bit difficult, route chapter of learning is very route almost all set for the URL. T he two are closely related!
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!!