emberjs--如何寫hbs

.hbs文件爲ember的界面，至關於html文件。

ember工程當中的hbs編寫能夠引用bootstrap.

關於bootstrap的一些教程能夠參考
bootstarp中文網：http://www.bootcss.com/
bootstarp官網:http://getbootstrap.com/
W3C：http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html

UI設計工具能夠參考：

http://www.w3cschool.cc/bootstrap/bootstrap-ui-editor.html
我用的pingendo.

能夠在pingendo當中將界面設計好，而後將html文件拷貝到相應的hbs當中便可，但ember當中須要引入bootstrap.

如何在ember當中引和bootstrap

經過bower來安裝bootstrap，安裝目錄指向依賴於工程目錄當中的.bowerrc文件。

{
  "directory": "bower_components",
  "analytics": false
}

admin$ bower install bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.4
bower bootstrap#*             validate 3.3.4 against git://github.com/twbs/bootstrap.git#*
bower bootstrap#~3.3.4         install bootstrap#3.3.4

因爲.bowerrc文件指向了bower_components，因此bootstrap會放在bower_components當中。

/myapp/bower_components/bootstrap

一樣安裝bootstrap-validator,bootswatch,font-awesome

配置bootstrap到ember當中
打開根目錄下面的Brocfile.js文件，編輯borcfile.js以下：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

var Funnel = require('broccoli-funnel');


// bootstrap
app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
// app.import('bower_components/bootswatch/paper/bootstrap.min.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
var bootstrapFonts = new Funnel('bower_components/bootstrap/dist', {
    srcDir: '/fonts',
    destDir: '/fonts'
});

// font-awesome
app.import('bower_components/font-awesome/css/font-awesome.min.css');
var awesomeFonts = new Funnel('bower_components/font-awesome', {
    srcDir: '/fonts',
    destDir: '/fonts'
});

// themes
var themes = new Funnel('bower_components/bootswatch', {
    destDir: '/themes'
});

// bootstrap validator
app.import('bower_components/bootstrap-validator/dist/validator.min.js');

module.exports = app.toTree([bootstrapFonts, awesomeFonts, themes]);

須要依賴 broccoli-funnel包。安裝方法：

npm install broccoli-funnel --save-dev

關於broccoli-funnel說明：http://npm.taobao.org/package/broccoli-funnel