对于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. 非对称加密, 助记词, PIN, WIF

    一钱包 1.1非对称加密, 助记词, PIN, WIF, 地址 1.1.1 非对称加密算法 非对称加密算法, 加密与解密使用不同的KEY, 我们分别称为私钥与公钥,其中可以通过私钥生成公钥 在比特币中 ...

  2. mac pkg移除

    1打开终端 sudo bash < <(curl -sL https://raw.github.com/mpapis/pkg_uninstaller/master/pkg-install) ...

  3. Qt代码吐槽

    擦,代码注释里写这么多“NB!”是要闹哪样!!

  4. Ubuntu系统下Anaconda使用方法总结

    前言:个人认为Anaconda比pip使用起来要方便很多,因为它创建虚拟环境和下载各种库都很方便.但是有时候conda的安装方法中没有某些库,必须使用pip来进行安装.所以,主要用Anaconda,偶 ...

  5. JavaScript 之 预编译 作用域,作用域链

    第一次写博客,本来是学习jQuery遇到闭包问题,发现并没有理解闭包,发现闭包牵扯的知识点太多.复习了一遍(发现自己该记住的全忘了)写在博客里,自己也是小白,希望大神们指点迷津,必将感激不尽. 我们知 ...

  6. fdsafdsafds

    name1 = input('请输入一个名字:') name2 = input('请输入一个名字: ') animal = input('请输入一个名字 :') print('刚按完摩的{}出门看见{ ...

  7. 在Ubuntu下安装lrzsz

    目录 自动安装 手动安装 下载 解压 安装 创建连接 在Ubuntu 14.04x64下安装lrzsz 自动安装 在终端中,输入命令 sudo apt-get install lrzsz 由于一些原因 ...

  8. Java for-each循环解惑

    Java for-each循环解惑 2014/04/24 | 分类: 技术之外 | 0 条评论 | 标签: JAVA 分享到:21 本文由 ImportNew - liqing 翻译自 javarev ...

  9. 20164318 毛瀚逸 Exp3 免杀原理与实践

    1实验要求 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编程(1 ...

  10. SP3871 GCDEX - GCD Extreme

    //author Eterna #define Hello the_cruel_world! #pragma GCC optimize(2) #include<iostream> #inc ...