Ember.js 当我们点击一​​个 link_to 时，我们会先点击 router.js 吗？或者是否加载了相关模板？我们什么时候不打router.js？

Question

我的两个问题是粗体，但是有相当多的代码是针对上下文给出的。问题主要与 router.js 何时被命中以及 ember 如何知道要加载哪些模板有关。

我正在制作一个玩具图书馆查找器应用程序。我对路由器、路由处理程序、模板和控制器的连接方式有一些疑问。

这是我的路由器：

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;

所以当我访问 /libraries...

1. 我点击了 router.js 文件FIRST

2. router.js 文件首先将我带到 library.hbs 模板，对吗？这是模板：

   <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}}
   

outlet 会渲染 library/index.hbs 模板，对吗？这是我的库/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. 点击此链接时：

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

我们先打哪里？我们再次点击 router.js 吗？ router.js中的编辑路径有个路径，那是做什么的呢？ URL 是如何呈现的？ library_id 来自哪里？

这是我的编辑模板：

<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>

提交按钮有一个名为“saveLibrary”的操作，它接受一个对象。 当我点击提交按钮时，我不会再次点击 router.js 文件，对吧？所发生的只是它寻找在当前上下文中定义的动作，它是路由处理程序，对吗？

这是我的路由/库/edit.js 文件：

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();
        }
      }
    }
  }
});

saveLibrary 方法有一个转换，然后到达 router.js 文件，对吗？转换会根据 router.js 文件中的定义方式更改 url，对吧？

Answer 1

点击此链接时：

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

我们先打哪里？我们再次点击 router.js 吗？

是的，会咨询路由器以将您路由到链接到中指定的路由。查看the source of the link-to component。您会看到，从根本上讲，它会创建到您指定的路线的过渡，并传递任何参数。

编辑路径 router.js 有一个路径，它有什么作用？

路径决定了 URL 栏中实际显示的内容。理论上，我们可以通过路径来引用所有路径，但给它们起不同的名称更容易。所以我们说library.edit 路由会在url 栏中显示路径'/:library_id/edit'。由于它是子路径，因此将附加到父路径。我们想在 url 中显示库的 id，所以我们使用 :library_id 语法，它是一个变量。

library_id 来自哪里？

通过说this.route('edit', { path: '/:library_id/edit' });，您已声明您打算在某个时候将变量放入此路径。您已将其命名为 library_id，它是该路径中的第一个（也是唯一一个）变量。

当您说{{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}} 时，您已经告诉路由器转到libraries.edit 路由，并将library.id 作为第一个（也是唯一的）参数传递。

当我点击提交按钮时，我不会再次点击 router.js 文件，对吧？

正确。

所发生的只是它寻找在当前上下文中定义的动作，它是路由处理程序，对吗？

也正确。

saveLibrary 方法有一个转换，然后到达 router.js 文件，对吗？转换会根据 router.js 文件中的定义方式更改 url，对吧？

是的，是的。

请记住，您给路由命名（library、library.edit），然后通过链接或直接调用转换到它们。