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文件中的第一

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

出口呈现了library / index.hbs模板，对吗？ 这是我的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. 单击此链接时：

     {{#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文件，对吗？ 所发生的一切就是寻找在当前上下文中定义的动作，这是路由处理程序吗？

这是我的routes / libraries / 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吗？

是的，请咨询路由器以将您路由到链接至中指定的路由。 检查链接组件的来源 。 您会看到，它从根本上创建了到指定路由的过渡，并传递了所有参数。

router.js中的编辑路径包含一个路径，该怎么做？

该路径确定URL栏中实际显示的内容。 从理论上讲，我们可以通过所有路径来引用所有路径，但是更容易给它们起不同的名称。 因此，我们说“ libraries.edit”路由将在网址栏中显示路径“ /：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'}}您已经告诉路由器去了{{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}路由，并传递了库。 id作为第一个（也是唯一一个）参数。

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

正确。

所发生的一切就是寻找在当前上下文中定义的动作，这是路由处理程序吗？

也正确。

而且saveLibrary方法有一个转换，然后可以转换到router.js文件，对吗？ 转换会根据router.js文件中的定义方式更改URL，对吗？

是的，是的。

请记住，给路由名称（library，library.edit），然后使用链接到或直接调用过渡来过渡到它们。