ember.js 101 入門教程第一課

時間 2019-11-18

標籤 ember.js ember 入門教程一課欄目 JavaScript 简体版

原文原文鏈接

須要聲明的是：目前ember.js已經發展到v2.50+ 的版本了，v1.0與新版本已經有很大不一樣，若是您是爲了瞭解ember.js的一些基礎知識，這個入門的東東會有些幫助，若是您正在開發一些web應用，就沒什麼借鑑和參考價值了，建議直接看官方文檔，不要被教程誤導了。javascript

Ember.js 的MVC框架是與其餘的JavaScript框架相比，具備更完整的MVC特性以及建立下一代web應用所需的不少特性，就像做者說的是個雄心勃勃的框架。
學習以前咱們須要在腦子裏創建些概念。一個ember.js的應用須要建立一個命名空間（也就是建立一個Application對象實例），空間裏會包含路由、數據模型、控制器、視圖、模版，基本上每一個路由要有提供數據的模型，對應的控制器，對應的視圖和模版—一套組件，也就是說應用程序空間裏會有不少套組件構成，每套組件包含了路由、模型、控制器、視圖、模版，而這些ember.js 都有默認建立，咱們要作的是改寫這些默認組件。把技術語言翻譯成大白話和中文其實挺有難度的。。。html

介紹數據綁定的模版

一、構建依賴

首先要作的事情是在文件head標籤部分聲明ember依賴的兩個小夥伴 jQuery 和 Handlebars。能夠經過ember.js工具完成，也能夠手工本身構建完成。java

主要的代碼：jquery

<head>
<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 />
<title>JS Bin</title>
</head>

二、Hello word 第一個應用

如何構建一個Hello word 的ember應用程序，而且運行它呢？你所須要的只是一個Templates 和一行JavaScript 代碼。web

Templates：ajax

<h1>Hello, World!</h1>

JavaScript：bash

var App = Ember.Application.create()

後臺的ember會建立一個控制器和根路徑，後面咱們會詳細講解。框架

三、顯示數據到模版

好了，再進一步，如何經過模版顯示數據？函數

如今咱們已經有了一個路由（網址）和一個模版，咱們要把數據綁定到模版。
首先，我已經獲得了App這個應用程序對象實例，我能夠定義一個name屬性，而且給它賦值。工具

var App = Ember.Application.create();
App.name = "Ember App";

而後更新模版來顯示它。

<h1>{{App.name}}</h1>

四、綁定數據到模版

ember中任什麼時候候你在模板中顯示數據，它會自動綁定，該模板將保持的實時更新。

咱們定義一個新的name屬性，並初始化設置secondsViewed屬性值爲 0，定義一個函數setInterval 用來使屬性值secondsViewed 自動 +1，最大值爲1000。
ember中get是讀取某個值，set是設置某個值，剛開始接觸ember 會有些不大習慣。
在用戶界面上放上 secondsViewed 屬性。

var App = Ember.Application.create({
  name: "Timer",
  secondsViewed: 0
});

setInterval(function() {
  var viewed = App.get('secondsViewed');
  App.set('secondsViewed', viewed + 1);
}, 1000);

<h1>{{App.name}}</h1>
<h2>{{App.secondsViewed}}</h2>

本文完。

完整代碼以下：

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

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

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<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 />
<title>JS Bin</title>
</head>
<body>
  
  <script type="text/x-handlebars">
    <h1>{{App.name}}</h1>
    <h2>{{App.secondsOnPage}}</h2>
  </script>
  
<script id="jsbin-javascript">
var App = Ember.Application.create()

App.name = "Hello World!";
App.secondsOnPage = 0;

setInterval(function() {
  App.set('secondsOnPage', App.get('secondsOnPage') + 1);
}, 1000);
</script>
</body>
</html>