Ember.js当我们点击一个link_to时，我们是否先点击路由器.js?还是加载了相关模板?我们什么时候不打路由器.

我的两个问题以粗体显示，但是为上下文提供了相当数量的代码。这些问题主要与路由器.js何时被击中以及余烬如何知道要加载哪些模板有关。

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

这是我的路由器：

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;

所以当我访问/图书馆时...

我先点击路由器.js文件

路由器.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}}

出口呈现库/索引.hbs 模板，对吗？这是我的库/索引.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}}

我们先打哪里？我们又.js打路由器了吗？路由器中的编辑路径.js有一个路径，这是做什么的？网址如何呈现？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"的操作，它接受一个对象。当我单击该提交按钮时，我不会再次点击路由器.js文件，对吗？发生的所有情况是它查找在当前上下文中定义的操作，该操作是路由处理程序，对吗？

这是我的路由/库/编辑.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 方法有一个过渡，然后命中路由器.js文件，对吗？转换会根据它们在路由器.js文件中的定义方式更改 url，对吗？

单击此链接时：
  {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}}
我们先打哪里？我们又.js撞路由器了吗？

是的，会咨询路由器以将您路由到链接中指定的路由。查看链接到组件的源代码。您将看到，在基本级别上，它会创建到您指定的路由的过渡，并传递任何参数。

中的编辑路径路由器.js有路径，它有什么作用？

路径确定 URL 栏中实际显示的内容。从理论上讲，我们可以通过路径来引用所有路线，但给它们起不同的名称更容易。所以我们说libraries.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 作为第一个（也是唯一的）参数传递。

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

正确。

发生的所有情况是它查找在当前上下文中定义的操作，该操作是路由处理程序，对吗？

也正确。

并且 saveLibrary 方法有一个过渡，然后命中路由器.js文件，对吗？转换会根据它们在路由器.js文件中的定义方式更改 url，对吗？

是

的，是的。

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

相关内容

最新更新

热门标签：