对于partia来说,可以理解为组件化的运用,即将对应的html/js/css进行封装,然后通过模板引擎直接进行调用

1、partial的注册

 //可以直接写在app.js,也可以写在之前所说的helper里面,因为是做注册,所以需要做的是配置化的处理
const hbs = require('hbs');//导入hbs库,扩展handlebars
const path = require('path'); // 处理路径相关 // 注册partial目录,即以后直接在对应的partials文件夹内去建partial文件进行调用即可
hbs.registerPartials(path.join(__dirname, '../views/partials'))

当注册完毕之后,可以开始写partial视图了,以layout模板为例,直接在partials文件夹中建立一个 名为 nav.hbs文件,然后把一段nav导航栏模块的html写进nav文件中,(可以将html中的css样式直接提取到<style>标签中来)

 <div class="nav">
<div class="left-logo">
<a href="/"><img src="../images/logo-new.png" alt="" style="opacity: 0;"></a>
</div>
<div class="right-view">
<ul class="right-text">
<li class="vip hover-li" style="position: relative;">
<a href="/vip-course"><span>VIP课
<i class="anticon anticon-plus plus"></i>
<i class="anticon anticon-minus minus"></i>
</span>
</a>
<div class="menu-second">
<i class="anticon anticon-caret-up caret-up"></i>
<i class="anticon anticon-caret-up caret-up-cover"></i>
<div class="menu-content">
<div style="overflow: hidden; padding: 0px 43px;">
<p class="vip-title">VIP课程</p>
{{#each vipcourses}}
{{#if (checkEven @index)}}
<a href="{{url}}">
<div class="row-course left-course">
<img class="course-img" src="{{ico}}" alt="">
<div class="course-text">
<p class="course-name">{{name}}</p>
<p class="course-describe">{{desc}}</p>
</div>
</div>
</a>
{{else}}
<a href="{{url}}">
<div class="row-course ">
<img class="course-img" src="{{ico}}" alt="">
<div class="course-text">
<p class="course-name">{{name}}</p>
<p class="course-describe">{{desc}}</p>
</div>
</div>
</a>
{{/if}}
{{/each}}
</div>
</div>
</div>
</li>
<li><a href="/open-course">公开课</a></li>
<li><a href="/study-center">
<img src="../images/grey1.png" class="study-icon-grey">
<img src="../images/blue1.png" class="study-icon-blue">
<div class="text-left">学习中心</div>
</a>
</li>
</ul>
</div>
<div class="toggle-bar">
<img class="bar" src="https://img.kaikeba.com/nav.png" alt="" style="width: 24px; height: 20px; position: absolute; top: 16px; display: block;">
<img src="https://img.kaikeba.com/delete.png" alt="" style="width: 20px; height: 20px; position: absolute; top: 16px; display: none;">
</div>
</div>

提取完毕之后就可以直接在模板引擎中进行引用{{> nav}} 也支持参数的传递

 //往partial中传递数据 data (字符串、数组、集合都可以,仅支持单一数据,不支持表达式)
{{> nav name=data}} //若需要传递多个参数,直接在后面追加即可
{{>nav name=data title=jdata}} //在partial中接收该字符串
{{name}}

2、动态partial

动态partial是指在某些特定的情况下,我们不知道该用哪个partial去做布局,或者说需要对于页面引用的partial去做动态化配置与使用;

需要通过撰写一个相应的helper来进行处理,主要的也就是通过这个helper方法,在partial应用的时候进行动态partial名称的替换

 //动态Partial
hbs.registerHelper('whichPartial',function (name) {
return name;
}) //页面中应用 根据不同条件去给navname赋值,以此识别对应的partial
{{> (whichPartial navname)}}

3、 块级部分视图 partial-block

块级部分视图与partial大致类似,但是在应用层面会相对比较灵活,主要有以下几种用法,对应的语法与partial有点不同,在调用的语法主要是{{#> @partial-block}}{{/@partial-block}},与一些常用的html标签有点类似。

错误处理:

//对于partial视图找不到的情况,可以适用,可以结合动态的partial进行使用
{{#> ooxx}}
出现错误时,您会看到这句话!
{{#> ooxx}}

使用块级partial传递内容

 <!--定义名为win的partial页面-->
<div class="win">
<div class="win-title">{{title}}</div>
{{> @partial-block}}
</div> //调用块级partial的方法,其中参数的传递也是跟partial差不多,可以传递多种类型的参数,也可以传递多个参数,但参数不能是表达式
{{#> win title="22222"}}
//此段的代码表示的是传递到以上的 {{> @partial-block}} 的位置
<div>这是窗口里面的内容。。。。。。。。。。。。。</div>
{{/win}}

声明布局partial

 <!-定义命名为layout的partial 对于下面的top foo bar 都可以进行动态的传递内容-->
<!--上面容器-->
<div class="top">
{{> top}}
</div>
<!--下面容器-->
<div class="content">
<div class="left">
{{> foo}}
</div>
<div class="right">
{{> bar}}
</div>
</div> <!--对于布局类型partial的调用->
<!--布局组件-->
{{#> layout}}
{{#*inline 'top'}} //代表在上面top传递的内容
这是top
{{/inline}}
{{#*inline 'foo'}}
这是foo
{{/inline}}
{{#*inline 'bar'}}
这是bar
{{/inline}}
{{/layout}}

部分视图 - partial的更多相关文章

  1. 视图(View)与部分视图(Partial View)之间数据传递

    写ASP.NET MVC程序,我们经常需要把数据从视图(View)传递至部分视图(Partial View) 或者相反. 今天Insus.NET使用 ControllerBase.TempData 进 ...

  2. 截取视图某一段另存为部分视图(Partial View)

    在做ASP.NET MVC后台管理程序时,根据程序需要,Isus.NET需要实现一个功能,就是动态截取视图某一段另存为部分视图Partial View. 思路为在视图中,使用jQury的程序截图以及P ...

  3. jQuery加载部分视图(Partial Views)

    本篇是演示使用jQuery加载部分视图(Partial View).如果你不想使用Razor的语法呈现部分视图,那此篇的方法是最理想的了.它可以Render至指定的tag上. 创建两个部分视图,一个为 ...

  4. MVC 部分视图:Partial() 、RenderPartial() 、 Action() 、RenderAction() 、 RenderPage() 区别

    在视图里有多种方法可以 加载部分视图,包括: Partial()  Action()  RenderPartial()  RenderAction()  RenderPage() 方法. 以下是这些方 ...

  5. MVC的部分视图(Partial View)

    MVC的部分视图确实与asp.net的用户控件有几分相似,实际应用起来的方式,它又是那样不尽相同. 上次练习了<MVC母版页_Layout.cshtml>http://www.cnblog ...

  6. MVC加载部分视图Partial

    加载部分视图的方法:Partial() .RenderPartial() . Action() .RenderAction() . RenderPage() partial 与 RenderParti ...

  7. mvc 分部视图(Partial)显示登陆前后变化以及Shared文件夹在解决方案资源管理器中没有显示的问题

    刚开始我的解决方案资源管理器中没有显示Shared文件夹,但Shared文件夹在项目中是实际存在的,我搜了下好像没有类似的解答(可能是我搜索的关键词不够准确).后来自己看了下vs2012. 其实解决方 ...

  8. MVC-04 视图(2)

    三.View如何从Aciton取得数据 从Action取得数据,在ASP.NET MVC可区分成两种方式,一种是“使用弱类型取得数据”,另一种则是“使用强类型取得数据”,两者的差别在于View页面最上 ...

  9. 使用HTML辅助方法载入分部视图

    在webform中我们用过user control可以减少重复代码也利于将页面模组化, 在mvc中 叫分部视图 Partial View.   也就是一个片段的view.可以利用Partial vie ...

随机推荐

  1. python初识模块

    sys import sys   print(sys.argv)     #输出 $ python test.py helo world ['test.py', 'helo', 'world']  # ...

  2. VI操作

    [[ 开头]] 结尾[[^ 开头第一个字符]]$  结尾最后一个字符 以下转载自:http://www.cnblogs.com/88999660/articles/1581524.html 进入vi的 ...

  3. SDKManager无法更新问题解决办法

    用大连东软的镜像代理 配置步骤 启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Sett ...

  4. linux中的baff/cache占用大量内存,如何清理?

    执行命令echo 3 > /proc/sys/vm/drop_caches,即可清空buff/cache 参考http://blog.csdn.net/kevins_lee/article/de ...

  5. CentOS7装好了开始装wrf了

    1. 安装PGI编译器 下载地址:https://www.pgroup.com/products/community.htm(pgi官网社区版) 下载完将其复制到虚拟机内: 补充一下 我是在home ...

  6. 小程序cover-view踩过的坑

    1.前段时间开发一个小程序,里边用到cover-view,发现cover-view其实很多都是不支持的,比如动画,如果你想要在cover-view上边加动画你会发现没有效果,虽然在模拟器里边可以显示动 ...

  7. hello.java分析

    如下图源码所示: 该段代码声明了一个entity实体类,该类有一个变量name,对该变量写了对应的get和set方法.类中还有一个空的构造方法hello(). @RequestScoped用于指定一个 ...

  8. 第3章 Data语意学

    在C++中经常会遇到一个类的大小问题,关于一个类的大小一般受到三个方面的影响. 语言本身所造成的额外负担,如在虚拟继承中会遇到如派生类中会包含一个指针指向base class subobjec,这样会 ...

  9. spring+springmvc+hibernate 框架搭建

    1.新建web项目,将所需jar包放到 lib 目录下 2.配置web.xml 配置文件 <?xml version="1.0" encoding="UTF-8&q ...

  10. 学习笔记CB004:提问、检索、回答、NLPIR

    聊天机器人,提问.检索.回答. 提问,查询关键词生成.答案类型确定.句法和语义分析.查询关键词生成,提问提取关键词,中心词关联扩展词.答案类型确定,确定提问类型.句法和语义分析,问题深层含义剖析.检索 ...