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