Handlebars基礎
Ember.js使用 Handlebars模板庫 來增強用戶介面。Handlebars與普通HTML相似，但提供了能改變顯示內容的嵌入表達式 (embed expressions)。
渲染模板後，不需要額外的代碼，內容就能自動更新。
如果你習慣基於縮排的語法，可以熟習Handlebars後嘗試 Emblem.js。
定義模板
如果你沒有使用構建工具(build tools)，可以在HTML中使用<script>標簽定義模板：<html>
<body>
<script type="text/x-handlebars">
Hello, <strong>{{firstName}} {{lastName}}</strong>!
</script>
</body>
</html>
這個模板會自動編譯成為應用的主模板，它會在應用載入時由路由顯示在頁面。你可以為模板取一個名字，以便重覆使用。例如一個多次出現的控制面板。如果想保留模板而非即時顯示，你可以使用
data-template-name屬性：<html>
<head>
<script type="text/x-handlebars" data-template-name="say-hello">
<div class="my-cool-control">{{name}}</div>
</script>
</head>
</html>
如果你正在使用構建工具管理應用，你應該知道怎樣預編譯Handebars模板並應用於Ember.js
Handlebars表達式
每個模板都有其關聯的控制器，模板會從中尋找要顯示的屬性。你可以使用花括號包圍屬性名稱，以顯示屬性：
Hello, <strong>{{firstName}} {{lastName}}</strong>!
這會從控制器中搜尋firstName和lastName屬性，插入至HTML中，然後放進DOM。預設情況下，第一個未命名的模板將與
ApplicationController關聯，App.ApplicationController = Ember.Controller.extend({
firstName: "Trek",
lastName: "Glowacki"
});
這個控制器與模板結合後，渲染的HTML為：
Hello, <strong>Trek Glowacki</strong>!
這些表達式(以及之後會提到的其他功能)具綁定機制，即HTML會隨著屬性的改變而自動更新。
隨著應用規模增加，將存在許多的模板，並與不同控制器關聯。
翻譯自：http://emberjs.com/guides/templates/handlebars-basics/
參考：http://emberjs.cn/guides/templates/handlebars-basics/
沒有留言:
發佈留言