ember使用Bootstrap实现导航栏UI

ember使用Bootstrap实现导航栏UI

木来 木来

由于上一篇的界面太丑,而且图表都显示不出来,于是,我对其进行了改进

在前面引入的了Bootstrap之后我们就可以在页面中直接使用了,并且不需要再在页面上引入相关的cssjs文件。

打开文件library-app/app/templates/application.hbs,清空原有代码再添加如下代码:

<div class="container">
    {{partial 'navbar'}}
    {{outlet}}
</div>

Ember.js项目的页面使用的是Handlebarsjs模板,{{}}是模板的语法。在Ember.js的官方参考教程中有一章是专门介绍如何使用Handlebarsjs模板的,或者根据Ember.js 入门指南之八handlebars基础学习。

在上述代码中{{partial}}是一个ember helper可以用于调用模板,这里就是调用了模板navbar,不过这个功能在2.4的参考文档中移除了可以在1.13.0的文档中看到,更多有关信息请看参考网址。

代码中{{outlet}}也是一个helper,但是这个是一个特殊的helper,你可以把这个helper理解为一个占位符。所有子模板都会渲染到{{outlet}}所在的位置。更多信息请看Ember.js 入门指南之十四番外篇,路由、模板的执行、渲染顺序。

创建一个模板

仍然是使用命令创建模板。

ember g template navbar

等待命令执行完毕之后可以看到library-app/app/templates/navbar.hbs这个文件。下面在文件中增加一个导航条。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' class="navbar-brand"}}Library App{{/link-to}}
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">

<ul class="nav navbar-nav">
<li>
<a href="#">Test Link</a>
</li>
 
 
<li>
<a href="#">Test Link</a>
</li>
 
<li>
<a href="#">Test Link</a>
</li>
 
 
 
</ul>


    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

代码中{{link-to}}是Handlebars模板的标签,在第一个{{link-to}}标签中index是一个路由的名字,模板被编译之后这个标签就转成一个普遍HTML标签的<a>,如果你想指定编译之后的标签名请使用属性tagName指定,比如上述代码的第二个link-to标签,在后面的文章中会使用组件(component)重构这个标签。

为了美化界面在页面的顶部加了css的填充,修改样式文件app.scss

@import "bootstrap";

body {
    padding-top: 20px;
}

等待项目重启完成,可以在页面上看到黑色的导航条,好像我们并且没有在任何地方使用这个模板navbar,为何能在首页上显示呢??其实我们已经在application.hbs中调用了!在这个模板中有这样一句代码{{partial 'navbar'}},在此根据模板名调用了模板navbar。如果删除了application.hbs中的{{partial}}界面上就什么都不显示了!请读者自行实验。

效果如下

图片.png

0 条评论