Emberjs With Requirejs
這幾天survey了requirejs順便讓它與emberjs跑在一起,有些心得所以在這裡紀錄一下。
就如requirejs官方網站的介紹當使用requirejs來管理javascript module load後在index.html裡只要有一行script載入你最主要的javascript,在這裡是main.js
1
|
|
來看一下main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
require.config中baseURL是指javascript根目錄,我所有javascript都放在scripts/底下, scripts/libs/目錄底下則是放了third party js library,paths中可以命名短字串避免每次都要輸入很長的字串, shim是用來載入library如果不支援AMD使用,由於emberjs本身不支援AMD所以用shim載入。 檔案底部是requireJS的module定義,[]裡面描述你的dependency,function(){}代表當所有dependency module載入後要執行的code。 在這裡我載入ember,app,route以及T/application.template四個modules,在function()裡只是簡單地印一下log。
1 2 3 4 5 6 7 8 |
|
app.js裡面寫當emberjs載入後建立我的App,這裡必須把App放進window.App不然在跑emberjs時會有錯誤。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
application.template裡面有兩個dependency(ember和menubar.view)。function裡面是comiple ember template。 在前面的app.js裡面如果沒有把App放進window.App話等程式run下去ember會報錯說找不到App.MenuBarView即使你的確有這個View存在。
1 2 3 4 5 6 7 8 9 10 |
|
menubar.view.js裡面我利用text這個requirejs plugin載入外部的html進來ember compile。那如何得到載入進來的html呢?很簡單就 是只要在function裡面加入相對應的parameters,由於這個module有2個dependencies所以在function裡面有2個parameters。而template 很自然就是對應到讀進來的html。