Ember.js当我们单击link_to时，我们是否首先点击了router.js？ 还是加载了相关模板？ 我们什么时候不打router.js？

Question

My two questions are in bold , but there is fair amount of code that is given for context. The questions mainly have to do with when the router.js is hit and how ember knows what templates to load.

I am making a toy library-finder app. I had some questions about how the router, route handlers, templates, and controllers are connected.

This is my router:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
  this.route('contact');

  this.route('admin', function() {
    this.route('invitations');
    this.route('contacts');
  });

  this.route('libraries', function() {
    this.route('new');
    this.route('edit', { path: '/:library_id/edit' });
  });
});

export default Router;

So when I visit the /libraries...

1. I hit the router.js file FIRST

2. the router.js file takes me to the libraries.hbs template first right? This is the template:

    <h1>Libraries</h1> <div class="well"> <ul class="nav nav-pills"> {{#link-to 'libraries.index' tagName="li"}}<a href>List all them</a>{{/link-to}} {{#link-to 'libraries.new' tagName="li"}}<a href>Add new</a>{{/link-to}} </ul> </div> {{outlet}} 

The outlet renders the libraries/index.hbs template then right? This is my libraries/index.hbs:

<h2>List</h2>

<div class="row">
  {{#each model as |library|}}
    <div class="col-md-4">
      <div class="panel panel-default library-item">
          <div class="panel-heading">
              <h3 class="panel-title">{{library.name}}</h3>
          </div>
          <div class="panel-body">
              <p>Address: {{library.address}}</p>
              <p>Phone: {{library.phone}}</p>
          </div>
          <div class="panel-footer text-right">
              {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}}
              <button class="btn btn-danger btn-xs" {{action 'deleteLibrary' library}}>Delete</button>
          </div>
      </div>
    </div>
  {{/each}}
</div>

4. When this link is clicked:

     {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}} 

Where do we hit first? Do we hit the router.js again? The edit path in the router.js has a path, what does that do? How does the URL render? Where does the library_id come from?

This is my edit template:

<h2>Edit Library</h2>

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          {{input type="text" value=model.name class="form-control" placeholder="The name of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Address</label>
        <div class="col-sm-10">
          {{input type="text" value=model.address class="form-control" placeholder="The address of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          {{input type="text" value=model.phone class="form-control" placeholder="The phone number of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" {{action 'saveLibrary' model}}>Save changes</button>
        </div>
    </div>
</div>

The submit button has an action called 'saveLibrary' which takes an object. When I click that submit button, I don't hit the router.js file again right? All that happens is that it looks for an action defined in the current context which is the route handler right?

Here is my routes/libraries/edit.js file:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('library', params.library_id);
  },

  actions: {
    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo('libraries'));
    },

    willTransition(transition) {

      let model = this.controller.get('model');

      if (model.get('hasDirtyAttributes')) {
        let confirmation = confirm("Your changes haven't saved yet. Would you like to leave this form?");

        if (confirmation) {
          model.rollbackAttributes();
        } else {
          transition.abort();
        }
      }
    }
  }
});

And the saveLibrary method has a transition which then hits the router.js file right? The transitions change the url depending on how they are defined in the router.js file right?

Answer 1

When this link is clicked:

  {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}} 

Where do we hit first? Do we hit the router.js again?

Yes, the router is consulted to route you to the route specified in the link-to. Check out the source of the link-to component . You'll see that at a fundamental level it creates a transition to the route you specify, passing along any args.

The edit path in the router.js has a path, what does that do?

The path determines what is actually shown in the URL bar. In theory we could refer to all routes by their path, but its easier to give them distinct names. So we say that the libraries.edit route will show the path '/:library_id/edit' in the url bar. Since it is a sub path, that will be appended to the parent's path. We want to show the id of the library in the url, so we use the :library_id syntax which is a variable of sorts.

Where does the library_id come from?

By saying this.route('edit', { path: '/:library_id/edit' }); you have declared your intent to put a variable in this path at some point. You've given it the name library_id and it is the first (and only) variable in that path.

When you say {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}} You've told the router to go to the libraries.edit route, and pass the library.id as the first (and only) argument.

When I click that submit button, I don't hit the router.js file again right?

Correct.

All that happens is that it looks for an action defined in the current context which is the route handler right?

Also correct.

And the saveLibrary method has a transition which then hits the router.js file right? The transitions change the url depending on how they are defined in the router.js file right?

Yes and yes.

Remember you give routes names (library, library.edit) and then transition to them with link-to or a direct call to transition.