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

时

我点击了router.js文件 FIRST

router.js文件先把我带到libraries.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}}

出口渲染库/ 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>

点击此链接时：

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

提交按钮有一个名为＆＃39; saveLibrary＆＃39;拿一个对象。 当我点击该提交按钮时，我再次点击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

点击此链接时：
this.route('edit', { path: '/:library_id/edit' });
我们先在哪里打？我们再次点击router.js了吗？

是的，咨询路由器以将您路由到链接到指定的路由。查看the source of the link-to component。您将看到，在基本级别，它会创建到您指定的路径的过渡，并传递任何参数。

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

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

library_id来自哪里？

通过说{{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}你已经声明了你想在某个时候将变量放在这个路径上的意图。你已经给它命名为library_id，它是该路径中的第一个（也是唯一的）变量。

当你说{{1}}你告诉路由器去了libraries.edit路由，并将library.id作为第一个（也是唯一的）参数传递。

当我点击提交按钮时，我没有再次点击router.js文件了吗？

正确。

所有发生的事情是它寻找在当前上下文中定义的行为，即路由处理程序权限吗？

也正确。

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

是的，是的。

请记住，您提供路线名称（library，library.edit），然后通过链接转换或直接调用转换为它们。

Ember.js当我们点击link_to时，我们先点击router.js吗？或是加载了相关模板？我们什么时候没有点击router.js？

1 个答案: