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），然后使用鏈接到或直接調用過渡來過渡到它們。