Ember.js-模版篇 Handlerbars基礎

Handlebars Basics

Ember使用了handlerbars模版庫來支持你的應用的用戶介面。Handlerbars模版包含靜態的HTML標籤和Handlerbars表達式(表達式通過 {{ }} 來調用)。

表達式中動態的內容會藉助數據綁定技術來實時渲染。這也就是說，如果你對當前上下文環境中的某個屬性做了更改，那麼這個改動會被自動的更新到模版中，渲染到屏幕上。

Displaying Properties

模版是由上下文所支持的。 上下文是一個可以提供屬性給模版的對象。Ember中的上下文常常是由component來提供。 當然，有些模版是對應於路由的，那麼路由對應的controller就是該模版的上下文環境。

下面給一個例子，application.hbs模版將會渲染firstName和lastName:

app/templates/application.hbs

Hello,{} {}!

上面代碼中，firstName和lastName讀取自當前的上下文環境(在這裡，上下文環境是application 的 controller)。

為了向上面的模版提供它所需要的屬性，我們需要在application的 controller 中定義這兩個屬性。定義如下：

app/controllers/application.js

import Controller from "@ember/controller";

exportdefaultController.extend({

firstName:"Trek",

lastName:"Glowacki"

});

通過上面的模版和controller的定義，將會渲染出如下的結果：

Hello,Trek Glowacki!

需要留意的是， {} 和 {}是被綁定的。所以它們任何一個的值發生變化，DOM都會被自動更新。

Helpers

Ember允許你可以自己定義helper，這樣的話就可以在模版中嵌入一些輕量級的邏輯。

比如說，現在你需要一段邏輯來做加法計算，在不定義計算屬性的前提下，你可以這麼做：

app/helpers/sum.js

import { helper } from"@ember/component/helper";

exportfunctionsum( params ) {

returnparams.reduce((a, b) => {

returna + b;

});

};

exportdefaulthelper(sum);

上面的代碼將允許你通過{} 的方式在模版中來調用sum ( ):

Total: {}

Helper將會輸出6.

Ember本身已經提供了許多helper，在後續的章節中讀者將會慢慢的了解它們。

Nested Helper

Helper可以被嵌套在其他helper中調用，也可以嵌套在組件中調用。

這使得值在被傳入組件或其他環境的時候，可以被helper預先處理。

helper不能被嵌套在{{ }}中，正確的做法是被嵌套的helper通過( )包裹：

{}

在這個例子中，2和4在被傳入{}之前會被{}處理。

所以，上面的輸出結果是10。

隨著你對本章節了解的更多，你會發現，正常的值可以在哪裡被使用，那麼helper也可以在哪裡被使用。 helper的結果就是一個值。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！