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

版权声明：本文为博主原创文章，未经博主允许不得转载。