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; 

所以，當我訪問/庫...

1. 我打router.js文件FIRST

2. 的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模板，然後對不對？這是我的庫/ 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> 

提交按鈕有一個名爲「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文件嗎？轉換會根據路由器中如何定義它們的方式更改url.js文件？

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欄中顯示的內容。從理論上講，我們可以通過他們的路徑來引用所有路線，但是更容易給他們不同的名字。所以我們說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作爲第一個（也是唯一的）參數。

當我點擊那個提交按鈕時，我不會再次點擊router.js文件了嗎？

正確。

發生的一切就是它尋找一個在當前上下文中定義的動作，它是路由處理器的權利？

也正確。

而saveLibrary方法有一個過渡，然後命中router.js文件吧？轉換會根據路由器中如何定義它們的方式更改url.js文件？

是的，是的。

記住你給路由名稱（庫，library.edit），然後通過鏈接轉換或直接調用轉換。