ember.js101 入門教程第四課

時間 2019-11-16

標籤 ember.js101 ember 入門教程第四欄目 JavaScript 简体版

原文原文鏈接

這一課咱們創建一個ember的實用程序，咱們將看到如何輕鬆地建立一個流行的用戶界面，以及在應用程序中如何連接、映射網頁的URL。其實大白話就是單擊選擇左面列表名字，右面顯示一行全名，而且把姓和名字分別再顯示一次，還有頭像圖片。主要關注的左邊的列表如何和右面數據關聯，地址欄的URL如何對應到頁面。javascript

主視圖-細節視圖中的：router.map ,{{outlet}},{{#linkTo}}

咱們先從主視圖渲染開始，課程將帶着你從後往前進行講解，爲了讓頁面好看一些例子中用了一些bootstrap框架的 css 語句和標籤。css

這是主視圖:html

<div class="container">    
  <div class="row-fluid">
    <ul class="nav nav-list span3 well">  // 1-3 這幾行標記是引用`bootstrap`的類，意思是定義左面視圖框，3個柵格單位寬，
                                          //能夠根據屏幕大小自適應調整大小；
      {{#each model}}                     //塊語句遍歷頂級模版中 model提供的數據users；

      <li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li>   //這句是關鍵，把每個 first 做爲一個連接，選擇後自動跳轉到user路由;
      {{/each}}
    </ul>
    <div class="span9 well">{{outlet}}</div> //意思是定義右面視圖框，9個柵格單位寬，`bootstrap` 整個屏幕寬度12個柵格，
                                             //{{outlet}} 做用是告訴ember插入user模版的相應內容；
  </div>
</div>

這是定義的 App 命名空間、路由、模型和要顯示的數據：java

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function() {     //定義頂級模版的model爲其提供數據；
    return users;
  }
});

var users = [
  {
    id: 1,
    first: 'Ryan',
    last: 'Florence',
    avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
  },
  {
    id: 2,
    first: 'Tom',
    last: 'Dale',
    avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
  },
  {
    id: 3,
    first: 'Yehuda',
    last: 'Katz',
    avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
  }
];

這裏是細節視圖：jquery

<script type="text/x-handlebars" id="user">    //定義user模版，顯示的內容；
  <h2>
    {{first}} {{last}}
    <img {{bindAttr src="avatar"}} class="pull-right" width=50 />
  </h2>
  <dl>
    <dt>First</dt>
    <dd>{{first}}</dd>
    <dt>Last</dt>
    <dd>{{last}}</dd>
  </dl>
</script>

在細節視圖中使用 routes 和 {{outlet}}ajax

在app.router.map咱們告訴路由器，咱們有一個用戶的資源，咱們但願網址爲user/:user_id時，URL自動鏈接訪問的路由或和模版（如userroute和user模板）。若是咱們沒有創建usercontroller或userview，ember會建立一個默認的控制器或視圖。注意路徑中的動態部分：ember將解析URL，交給路由model的params參數。bootstrap

如今，當咱們點擊一下，注意到該網址是如何改變，複製並貼他們當前的URL，或使用前進後退按鈕，他們老是會獲得正確的路徑。當構建ember應用程序時，咱們老是映射一個路徑，而後在作其餘事情以前先建立一個模板。app

App.Router.map(function() {
  this.resource('user', {path: "/users/:user_id"});   //這裏定義了user的路由，對應的URL爲`/users/0`或 `/users/1`或 `/users/2`，
                                                      //隨着選中的不一樣users中ID會發生變化;
});

App.UserRoute = Ember.Route.extend({                 // 定義user路由使用的數據model，參數`params`來源於 {{linkTo}} 傳遞過來的網址，
                                                     // ember將解析網址參數，並返回對應ID的數據；
  model: function(params) {
    return users[params.user_id];
  }
});

完整代碼：框架

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2016 by symphonyh (http://jsbin.com/dojidir/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta name="description" content="Ember: Routes, {{outlet}}, and {{#linkTo}}" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<title>Episode 003</title>
<style id="jsbin-css">
body { margin-top: 30px }

.active {
  color: red !important;
}
</style>
</head>
<body>
  
  <script type="text/x-handlebars">
    <div class="container">
      <div class="row-fluid">
        <ul class="nav nav-list span3 well">
          {{#each model}}
          <li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li>
          {{/each}}
        </ul>
        <div class="span9 well">{{outlet}}</div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="user">
  <h2>
    {{first}} {{last}}
    <img {{bindAttr src="avatar"}} class="pull-right" width=50 />
  </h2>
  <dl>
    <dt>First</dt>
    <dd>{{first}}</dd>
    <dt>Last</dt>
    <dd>{{last}}</dd>
  </dl>
  </script>
  
<script id="jsbin-javascript">
var App = Ember.Application.create();

App.Router.map(function() {
  this.resource('user', {path: '/users/:user_id'});
});

App.UserRoute = Ember.Route.extend({
  model: function(params) {
    return users[params.user_id];
  }
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return users;
  }
});

var users = [
  {
    id: 0,
    first: 'Ryan',
    last: 'Florence',
    avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
  },
  {
    id: 1,
    first: 'Tom',
    last: 'Dale',
    avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
  },
  {
    id: 2,
    first: 'Yehuda',
    last: 'Katz',
    avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
  }
];
</script>
</body>
</html>