zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    解决Thread 的关闭问题
    使用.NET实现断点续传
    如何将int类型数据转换成byte数组
    怎么样读取Excel表格中的数据(C#.Net)
    .NET平台下WEB应用程序的部署(安装数据库和自动配置)
    ASP.NET程序中常用的三十三种代码
    C#中的类型转换
    解决StreamReader读取中文出现乱码的问题
    C#下的Raw Socket编程实现网络封包监视
    利用键盘钩子在Windows平台下捕获键盘动作
  • 原文地址:https://www.cnblogs.com/penggy/p/4786499.html
Copyright © 2011-2022 走看看