Handlebars学习记录

三、查究之路

用新的模版引擎Handlebars来减轻。上边所示的案例,表明式中的任何html代码将会被活动忽视,可是有的时候我们供给剖析html标签,那么将在用多个花括号{{{ }}}来消除这些主题素材。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命案</title>
    <script type="text/javascript" src="handlebars.js"></script>
</head>
<body id="content-area">
</body>
<script id="address-template" type="text/x-handlebars-template">  
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{#each page}}
    <div class="sec_{{@index 2}}">
        <p>{{@key[0]}}</p>
        <p>性别:{{@key[1]}};联系方式:{{@key[2]}};地址:{{{@key[3]}}};</p>
    </div>
    {{/each}}
</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {  
  // 抓取模板数据  
  var theTemplateScript = $("#address-template").html();  
  // 编译模板  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  // 定义数据  
  var data={
        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
    }
  // 把数据传送到模板  
  var theCompiledHtml = theTemplate(data);  
  // 更新到模板  
  $('#content-area').html(theCompiledHtml);  
});  
</script>

图片 1

刚运转就出错了。因为那个模板刚上手,所以实际上在官方网址里面,笔者找不到有在{{}}符号里面实行演算的写法

图片 2图片 3

末段发现成Helper那些东西,其实就是近似写三个过滤器,你想把数量过滤成如何体统都得以因此编写制定这么些Helper

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命案</title>
    <script type="text/javascript" src="handlebars.js"></script>
</head>
<body id="content-area">
</body>
<script id="address-template" type="text/x-handlebars-template">  
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{#each page}}
    <div class="sec_{{formatnumber @index}}">
        <p>{{@key[0]}}</p>
        <p>性别:{{@key[1]}};联系方式:{{@key[2]}};地址:{{@key[3]}};</p>
    </div>
    {{/each}}
</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {  
  // 抓取模板数据  
  var theTemplateScript = $("#address-template").html();  
  Handlebars.registerHelper('formatnumber', function(num, options){
      num = num   2;
      return num;
 });
  // 编译模板  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  // 定义数据  
  var data={
        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
    }
  // 把数据传送到模板  
  var theCompiledHtml = theTemplate(data);  
  // 更新到模板  
  $('#content-area').html(theCompiledHtml);  
});  
</script>

图片 4

Helper的岗位必需在编写翻译模板在此之前,不然是船到江心补漏迟的!!

行使Helper之后,今后又报任何的不当

图片 5图片 6

居然连数组的写法都不援助,不过获取属性的写法却能够,比方@key["name"]。不得不调侃那么些模板引擎用起来真不方便。

唯独最终依旧找到消除的思绪

<script id="address-template" type="text/x-handlebars-template">  
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{#each page}}
    <div class="sec_{{formatnumber @index}}">
        <p>{{#with @key}}{{0}}{{/with}}</p>
        <p>性别:{{#with @key}}{{1}}{{/with}};联系方式:{{#with @key}}{{2}}{{/with}};地址:{{#with @key}}{{{3}}}{{/with}};</p>
    </div>
    {{/each}}
</script>  

很缺憾,用@key即便并未有出错了,可是却渲染不出来。

图片 7图片 8

事实上早就离成功很类似了,把@key改成this就能够了

<script id="address-template" type="text/x-handlebars-template">  
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{#each page}}
    <div class="sec_{{formatnumber @index}}">
        <p>{{#with this}}{{0}}{{/with}}</p>
        <p>性别:{{#with this}}{{1}}{{/with}};联系方式:{{#with this}}{{2}}{{/with}};地址:{{#with this}}{{{3}}}{{/with}};</p>
    </div>
    {{/each}}
</script>  

 

图片 9

示例
{{#bold}}{{body}}{{/bold}}

Handlebars.registerHelper('bold', function(options) {
  return new Handlebars.SafeString(
      '<div class="mybold">'
        options.fn(this)
        '</div>');
});

$smarty = new Smarty;
$smarty->assign('yesterday', strtotime('-1 day'));
$smarty->display('index.tpl');

二、导火索

这段时间在做二个平移H5翻页的职能,类似于MAKA模板这种。若是差不离框架如下

图片 10图片 11

首先页是首页,第二页开摆正是要动态增加的地点,所以红框里面包车型地铁样式类,是从2始发的,那是率先个伏笔。

发端代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命案</title>
</head>
<body>
    <div class="sec_1">
        <p>首页</p>
    </div>
    <div class="sec_2">
        <p>张三</p>
        <p>性别:男;联系方式:123;地址:广州;</p>
    </div>
    <div class="sec_3">
        <p>李四</p>
        <p>性别:女;联系方式:321;地址:深圳;</p>
    </div>
    <div class="sec_4">
        <p>王五</p>
        <p>性别:男;联系方式:213;地址:佛山;</p>
    </div>
</body>
</html>

本条看起来用Art_Template模板引擎很轻易就会落到实处。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命案</title>
    <script type="text/javascript" src="template-web.js"></script>
</head>
<body id="content-area">

</body>
<script id="tem" type="text/html">
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{each page value index}}
    <div class="sec_{{index 2}}">
        <p>{{value["name"]}}</p>
        <p>性别:{{value["sex"]}};联系方式:{{value["tel"]}};地址:{{value["address"]}};</p>
    </div>
    {{/each}}
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    var data={
        page:[{
            name:"张三",
            sex:"男",
            tel:"123",
            address:"广州"
        },{
            name:"李四",
            sex:"女",
            tel:"321",
            address:"深圳"
        },{
            name:"王五",
            sex:"男",
            tel:"213",
            address:"佛山"
        }]
    }
    var html = template('tem', data);
    $('#content-area').html(html);
</script>
</html>

图片 12

用模板引擎渲染效果一模一样。

当自身心满意足地把这段代码交给后台开辟A的时候,A说,出于种种原因你把多少格式改成下边这样吧,小编才相比较好管理接下去的干活。

var data={
        page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
    }

图片 13

好吧,反正原理都一点差距也未有,修改之后代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命案</title>
    <script type="text/javascript" src="template-web.js"></script>
</head>
<body id="content-area">

</body>
<script id="tem" type="text/html">
    <div class="sec_1">
        <p>首页</p>
    </div>
    {{each page value index}}
    <div class="sec_{{index 2}}">
        <p>{{value[0]}}</p>
        <p>性别:{{value[1]}};联系方式:{{value[2]}};地址:{{value[3]}};</p>
    </div>
    {{/each}}
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    var data={
        page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
    }
    var html = template('tem', data);
    $('#content-area').html(html);
</script>
</html>

图片 14

标题来了,未来的急需是,借使地址太长了,要求换行。那还不轻松,在要求换行的地点投入<br/>不就行了嘛。

var data={
        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
    }

图片 15

但是最后开掘依旧作者太天真了,无论是<br/>还是n以至是&在模板引擎渲染出来之后都以近乎那样的

图片 16图片 17

压根就是用作字符串了,何况这段日子来讲本人还找不到点子可以消除这些标题,“命案”因此发生。

示例
// 模板
{{{{raw-helper}}}}
  {{bar}}
{{{{/raw-helper}}}}

// 对应的Helper函数
Handlebars.registerHelper('raw-helper', function(options) {
  return options.fn();
});

// 结果
{{bar}}

{$key}:{$item}<br />

一、绪论

说真话,真的不晓得怎样给那篇博客命名,因为自身觉着应该有一点点小友人蒙受跟自个儿同一的标题正在心急火燎中。

六、APIs

Handlerbar提供的API分三类:

  • Base:包蕴模板编写翻译、注册/注销种种Helper/Partial、模板转移等。
  • 工具类:决断变量类型
  • 数码变量:@root、@first、@last、@key等

必要声明的API:

复制代码 代码如下:

3. 出口原始 Blocks

书写原始的mustache语句块:

咱俩的模版须要有多少个关照的标记,比如

此中通过@partial-block获取外界block内全部模板
// 模板内容
{{#> layout }}
   <p> layout中的默认全部slot</p>
{{/layout}}

// layout模板内容
{{> @partial-block }}

// 结果
<p> layout中的默认全部slot</p>

复制代码 代码如下:

8. each Helper的as语法

遍历的还要提取value-key,便于内部使用,下边包车型大巴例证一清二楚。

{{#each array as |value key|}}
  {{#each child as |childValue childKey|}}
    {{key}} - {{childKey}}. {{childValue}}
  {{/each}}
{{/each}}

事实上可怜我们得以用php管理好以往再举办赋值。

2. 块级模板

块级需求加#标。若是使用Vue,那有的和slot的概念很像。这里分三类:

其次就是变量调整器了,非常多时候大家从数据库中获得的数码,都要细小管理下才输出的,例如日期格式,只呈现年月日就能够再如输出的剧情里的换行要换来<br />工夫在页面显示相应的旗帜,这年大家能够利用smarty自带的变量调治器,格式如下

五、注释

{{!-- 这段注释只在源码中显示 --}}
{{! 这段注释只在源码中显示 }}
<!-- 这段注释会在最终的HTML中显示 -->

$rows = 从数据库读出的据,
$smarty->assign("rows",$rows);

new Handlebars.SafeString(string)

标志内容是安全的,单独行使并不起怎么样作用:

new hbs.SafeString('<script>alert(1)</script>')
// 返回
SafeString { string: '<script>alert(1)</script>' }

亟待和方面包车型大巴escapeExpression结缘使用:

Handlebars.registerHelper('link', function(text, url) {
  text = Handlebars.Utils.escapeExpression(text);
  url  = Handlebars.Utils.escapeExpression(url);

  var result = '<a href="'   url   '">'   text   '</a>';

  return new Handlebars.SafeString(result);
});

{if $username !=""}
欢迎{$username}
{else}
请首先登场入
{/if}

6. 去除多余换行符(Inline)

例燕体写block是有换行符的,Inline格局能够将换行符都删除。注意加~的位置!

要是内容部分在显示的时候把全体的换行突显为<br />只必要如下写法

四、Partials

本条能够精晓为子模板,用于模板复用,子模板承接当前的上下文变量情形。使用前供给登记,这一个和Helper一致。

Handlebars.registerPartial('myPartial', '{{name}}')
  • 模板中的name能够通晓为为this.name
  • 其次个参数必得是字符串(有些不友善)

Partials使用境况包罗:Footer(友情链接)、Header(Logo登入)、Nav(导航)等。

section标志格式

fallback方案
{{#> myPartial }}
  Failover content(如果myPartial未定义显示这里的东西)
{{/myPartial}}

首先那是多个量当然用的是数组了,

Basic Usage

也能够不写else独有为真时显示的剧情,譬喻常见的一种情形是网页上有多少个登陆口登录前体现的是表单登陆后展现的是客户音讯,假若多个量曾经赋值给模板了诸如 $username 客户登陆那几个量就有顾客名尚未登入这一个量正是空的,我们得以那样写

1. 单行模板

{{> Partial名称 key1=value2}}
  • 挂号的Partials将会填充在这里个地方
  • 支撑传入参数,参数可在里头一贯利用(和Helper完全两样,不影响上下文this)
  • 留意!没有八个括号的写法(那个和Helper完全两样)

<h1>{$title}</h1>
<div>{$content}</div>

将子模板嵌入具体地点(具知名字的slot方案)

以此定义和Vue的签名Slot概念同样,直接贴代码,简单的讲:各回各家,各找各妈。

// 模板
{{#> layout}}
  {{#*inline "nav"}}
    My Nav
  {{/inline}}
  {{#*inline "content"}}
    My Content
  {{/inline}}
{{/layout}}

// layout模板内容
<div class="nav">
  {{> nav}}
</div>
<div class="content">
  {{> content}}
</div>

// 结果
<div class="nav">
  My Nav
</div>
<div class="content">
  My Content
</div>

{section name=i loop=$list}
<li>{$list[i].title}</li>
{/section}

参数(格式固定)

参数含义有地方和书写格式鲜明,使用空格分离,分为三类:

  • name:helper的名称
  • data1/data2:传入helper的数量,能够是八个,写在data后边空格隔绝就行
  • hash:options对应最后参数,以key=value花样书写,这么些在helper定义的option.hash获得,假诺未定义则为{},不须要为空推断。

模板引擎是用以把模版文件和数据内容统一在共同的前后相继,便于网址开采方便人民群众代码分离和维护,理解三个模板最棒精晓其专门的学问规律,以便于实现一通万通。

二、插值

语法和Angular、Vue很像:{{value}}{{{Html}}}

  • {{value}}:在当前的上下文中找value那一个本性并将值填充到这几个任务。其实,那也可知为二个内置helper,意思是寻觅value其一称呼的helper
  • {{{Html}}}:同上,不过内容原样输出不转义。

此间须要小心在传唱的变量中无法有特殊字符:

! " # % & ' ( ) *   , . / ; < = > @ [  ] ^ ` { | } ~

一旦有些话供给用[]包起来(也能够是'或者"):

{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}

array([id]=>1,['title']=>"标题",…);

读书缘由

Handlebars模板引擎从明年就关心了,因为使用类HTML格式/类Vue/类Angular的语法作者比较习贯,所以就定在了读书布署中。最近商家后台渲染项目都是行使Handlebars模板引擎,所以那篇博文轻易做下学习记录。

{foreach key=索引 item=值 from=赋值变量}

三、Helpers

Helper使用前须求注册,平时用来对数据的再加工,比如:

  • 改动多少格式
  • 给多少外边套一些马克up片段
  • 马克up片段保存/传送(style/script)

复制代码 代码如下:

模板引擎是做什么的

模板引擎所做的专门的职业简单的讲就是:

输入模板字符串 数据 => 获得渲染过的字符串

亟需每每的是,获得的是透过多少填充的静态字符串。另外,依照页面包车型大巴布局再拼凑其他部分HTML片段,最终在发送到客商端。因此,在需求SEO场景条件下相比较适度,比方:社交、音讯、博客、站点导航等网址是必需使用的。

除此以外,模板引擎除了Handlebarsjs还有:Jade templatingUnderscore TemplatesMustache等。除非现存的每一项模板引擎不适合自个儿的业务,提议在选取开源项目标时候依然选用口碑好一些、这几天还在保护的种类。

$smarty->assign($rows);smarty就能取多少索引自动一一赋值,然而今年为了幸免引起变量矛盾,我们盼望依然向来以数组方式赋值呢,举例

7. 输出原始数据

正确,没有丝毫改变的出口,有三种办法:

  • 单行形式,以开头
这里填写你要输出的原始String
  • block模式,raw变量(truefalse)调整是还是不是出示此中内容
{{{{raw}}}}
这里填写你要输出的原始String
{{{{/raw}}}}

{/foreach}

动态模板

通过chooseHelper其一Helper匡辅助选举用使用哪个Partial,chooseHelper应该回到已登记的Partial名称

括号中使用Helper的语法

{{> (chooseHelper) }}

复制代码 代码如下:

注册Helper
Handlebars.registerHelper('name', function(data1, data2, options) {
    // options.name: 当前helper的名称, 例如: debug
    // options.hash[hashKey1] === hashValue1
    // options.hash[hashKey2] === hashValue2
    // options.fn(this): 块级helper内部的模板函数
    // options.inverse: else分支的模板函数
    // options.data.root: 当前页面填充的数据对象
    // return 的字符串就是渲染的Markup片段
});

复制代码 代码如下:

5. 嵌入子Helper(Subexpressions)

情趣是,在父Helper中流传子Helper的沙盘String,语法是这般的:

{{outer-helper (inner-helper 'abc') 'def'}}
  • 其间使用名为inner-helper的helper,传入参数:abc
  • 外表使用名称叫outer-helper的helper,传入参数:生成的模板字符串def

<li>{$v.title}</li>

示例
{{{link "See more..." href=story.url class="story"}}}

Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];

  for (var prop in options.hash) {
    attrs.push(
        Handlebars.escapeExpression(prop)   '="'
          Handlebars.escapeExpression(options.hash[prop])   '"');
  }

  return new Handlebars.SafeString(
    "<a "   attrs.join(" ")   ">"   Handlebars.escapeExpression(text)   "</a>"
  );
});

循环list变量各类量赋值到v里,然后从变量v里面钦命要来得的目录,除了循环标识外,它还给我们提供了一部分常用的语法标识,比如包蕴文件,条件决断,大家领略HTML不能够包蕴文件,比如网页尾部,但smarty提供了{include}的符号,能够像php同样包罗文件,譬如{include file="文件路线"} 这些标志格式是恒久的,何况以此门路必须在模板引擎钦赐的门径下,而标准剖断的语法和php同样是if条件推断,语法如下

一、JS模板编写翻译

能够将模板字符串写在*.hbs中,也得以是在<script>中定义

index.tpl:

模板渲染进程

在Express中默许使用的``hbs```模块渲染Handlerbars模板,渲染进度是那样子的:

  • 探索路由对应的沙盘,举行编写翻译,并将编译的结果保存为 A
  • 查找layout.hbs,如果
    • 留存:对layout.hbs实行编写翻译,此中{{{body}}}标签替换到A,并重临最后编写翻译结果B
    • 不存在:返回A

{/foreach}

2. 块级 Helper

蕴含内部模板结构的写法,参数和注册方式同上,具体写法如下:

{{#name data1 data2 hashKey1=hashValue1 hashKey2=hashValue2}}
  内部模板
{{/name}}

先把数量放到三个数组中再一遍性交给smarty,那样一来list变量里面是一个二维数组,如若是我们收获贰个如此的二维数组,要把个中全部值突显出来,最棒的不二秘技是循环输出,一样smarty为大家提供了循环用的号子,section和 foreach

文化图谱

图片 18

Handlerbars结构.png

复制代码 代码如下:

1. 单行 Helper

单行的Helper能够是双大括号{{xx}},或者是{{{xx}}}包装,分裂在于:

  • {{xx}}:内部重临的模版字符串会转义管理,标签呈现为字符串
  • {{{xx}}}:和地点的插值管理情势同样,重返的字符串不转义
{{{name data1 data2 hashKey1=hashValue1 hashKey2=hashValue2}}}

index.php:

利用建议

  • 前面多个采纳了自定义的Helper/Partial供给和后端同步,不要忘记。
  • 如倘使静态内容为主,那就直接服务端渲染好了,首屏加载速度快,不提议采取复杂的Helper/Partial,View层专心体现就能够,数据格式在填充模板前管理好。非器重部分使用异步加载,比方简书的投稿处理/斟酌/推荐阅读使用的是Vue做异步内容渲染的。
  • 若果是数量交互、动态的选拔分界面(比如中后台系统、查询系统),这就不该用拼模板的思绪去做,而是用做应用的架构(MV*、组件树、组件/模块、数据驱动视图)思路去做。

各类模板有其相应的书写法规,接下去如若要展现的是八个稿子列表呢,假若mysql给我们重临了10条数据,10条数据都要展现出来,并且她们的目录确定完全同样,依据编制程序思路清楚结果求进度,要是展现如下

示例
// 模板
{{#each nav ~}}
  <a href="{{url}}">
    {{~#if test}}
      {{~title}}
    {{~^~}}
      Empty
    {{~/if~}}
  </a>
{{~/each}}

// 数据
{
  nav: [
    {url: 'foo', test: true, title: 'bar'},
    {url: 'bar'}
  ]
}

// 结果
<a href="foo">bar</a><a href="bar">Empty</a>

复制代码 代码如下:

Handlebars.escapeExpression(string)

字符转义函数,将string中的 &, <, >, ", ', `, = 变为转义字符. 保障传入的字符串是安枕而卧的。比如:

hbs.Utils.escapeExpression('<script>alert(1)</script>')
// 转化为
<script>alert(1)</script>
// 在html中显示字符串
<script>alert(1)</script>

如若位置装有攻击性的字符串未转义,将要浏览器中弹出alert对话框。

复制代码 代码如下:

参考

  • Handlebarsjs官网
  • 有哪些好用的前端模板引擎?

{section name=此次巡回的名字 loop=数据量名}
...
{/section}

4. 已经登记好的常用Helper:

if/else/unless/with/each/log/blockHelperMissing/helperMissing

咱俩只要在php把这一个变量筹划好,并赋值给smarty就可以除了那一个标志外还大概有的标志自行仿效手册,

echo $rows['title']

再有贰个写法就是foreach 其语法如下:

{$smarty.now|date_format}
{$smarty.now|date_format:"%A, %B %e, %Y"}
{$smarty.now|date_format:"%H:%M:%S"}
{$yesterday|date_format}
{$yesterday|date_format:"%A, %B %e, %Y"}
{$yesterday|date_format:"%H:%M:%S"}

地方的代码看起来很像for循环,但这里的i不是for循环里面包车型地铁$i 只是这些轮回的名字,$list[循环名]那一个写法能够每一回从数组里拿走二个量,正如刚刚说的,$list是三个二维数组,$list[i]获得的要么数组。

复制代码 代码如下:

假设那是大家希望输出的样子

上边写上安顿

{if变量==值或量}
为真时突显的值
{else}
为假是展现的值
{/if}

{要出口的变量|调治器名:参数}

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

Feb 6, 2001
Tuesday, February 6, 2001
14:33:00
Feb 5, 2001
Monday, February 5, 2001
14:33:00

日子的格式化能够用date_format 比方手册上

{foreach  item=v from=$list}

<ul>
<li>1111</li>
<li>222</li>
<li>333</li>
<li>4444</li>
</ul>

二个个赋值太难为,assign方法支持数组直接赋值,$rows = 从数据库读出的据,

复制代码 代码如下:

模板文件日常是HTML xml js等品种文件,即便不用模板引擎若要把多少呈未来网页上,我们须要在php中输出HTML,而利用模板则只要把数量提交模板引擎程序就能够,然后告诉它用哪个模板文件,自然就能够把数据和页面结合之后回到或输出,模板至罕见以下职能1.把多少提供给模板引擎的成效。2.点超模板的功用。3.输出结果的作用。平时的话为了有支持程序猿们运用模板引擎,开辟者都会把它的效劳在早晚水准上包裹起来,封装成八个类,实例化之后收获一个对象,即模板引擎对象,八个对象有其性能和办法,smarty对象的个性和办法在smarty手册上搜寻,首先说说其模式,assign 把数量提交给模板的办法。未有独立的内定模板文件的点子已经统一到输出的主意中,输出的主意有七个display 直接出口  fetch 重临合併好的HTML代码,对于出口大家最首要利用的是assign 因为我们体现的数据往往是种种性的,恐怕是二个量,大概是二个数组量也恐怕是多维数组,在差异的情景下应当怎么精确提交给smarty是二个难点,提交后怎么对应展现也是个难题,smarty引擎使用的表达格局是先把HTML文件转载为php文件,然后在赋值种种量,並且实践那些php文件,对应分歧的数据格式,它有一套固定的书写情势,必要大家用这种书写方式在模板文件上做相应的标记,smarty默许使用的模板标志符是一对{},比方{$a}那么些标识等效于echo $a;在php中大家须求有相应的赋值进度,$smarty->assign("a","值");假设大家有三个量拓宽赋值,二个个如此写就很麻烦,smarty为大家着想了那一点,举例大家从数据Curry读出叁个篇章,要来得在页面包车型客车源委有标题内容小编时间,数据结构大意是这么的

$list=array();
While($rows=数据){
$list[]=$rows;
}
$smarty->assign("list",$list);

只要这时大家在模板的暗号是{$rows} 那输出的时候大家只雅观到array 正如php里面直接echo数组同样,在php输出具体积是echo $rows['title'];smarty规定的暗记是一个点号,{$rows.title},用这种办法临近于

复制代码 代码如下:

<?php
define("ROOT",str_replace('\','/',dirname(__FILE__)).'/');//定义根路线
//加载smarty类
require ROOT.'lib/smarty.class.php';
$samrty = new smarty();//实例化一个smarty类
//配置各类目录
$smarty ->setTemplateDir(ROOT.'templates/')
        ->setCompileDir(ROOT.'templates_c')
        ->setPluginsDir(ROOT.'plugins/')
        ->setCacheDir(ROOT.'cache/')
        ->setConfigDir(ROOT.'configs/');
$smarty->caching = false;//是不是开启缓存
$smarty->left_delimiter = '<{';//设置左右 防止和js css 等发生冲突
$smarty->right_delimiter = '}>';
?>

OUTPUT:

你或者感兴趣的稿子:

  • [PHP]模板引擎斯Matty深入显出介绍
  • JAVA velocity模板引擎使用实例
  • ThinkPHP使用smarty模板引擎的办法
  • Laravel模板引擎Blade中section的有些标签的分别介绍
  • node.js 使用ejs模板引擎时后缀换到.html
  • javascript轻量级模板引擎juicer使用指南
  • 须要利用php模板的恋人不可不看的很几个甲级PHP模板引擎相比较剖判
  • CodeIgniter模板引擎使用实例
  • Discuz 模板引擎的封装类代码
  • JavaScript模板引擎Template.js使用详解

{$content|nl2br}

本文由上海时时乐走势图发布于web前端,转载请注明出处:Handlebars学习记录

您可能还会对下面的文章感兴趣: