zoukankan      html  css  js  c++  java
  • handlebar.js使用

    官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用

    一、定义模板

    <script id="entry-template" type="text/x-handlebars-template"> 
        <div class="entry">
          <h2>{{title}}</h2>
          <div>{{body}}</div>
         </div>
    </script> 

    <script id="entry-template" type="text/x-handlebars-template"> </script>

    中间就是要加载的模板样式,"{{}}"为模板加载的位置

    二、替换模板内容
    另用一个<script>标签书写

    1     var source = $("#entry-template").html();
    2     var template = Handlebars.compile(source);

    表示获取 #entry-template 的DOM ,即上段script引用的部分。在用handlebar.js的方法 Handlebars.compile()匹配“{{}}”中得内容

    1 var context = {title: "My New Post", body: "This is my first post!"};
    2 var html    = template(context);

    context 对象用来定义模板内容

    template方法用来加载context,实际上是对模板上对应context的字段替换。

    最后输出

    1 $("#main").html(html);

    1.如需要在模板中添加新标签

    var context = {title: "My New Post", body: "<p>This is my first post!</p>"};

    则用"{{{}}}"方法,可以将标签添加到模板中,否则<p>会显示出来。

     另外还有,引用块模板等以后补充

  • 相关阅读:
    ADO.Net——增、删、改、查
    面向对象——类库五大原则
    面向对象——设计模式和委托
    JS 函数 内置方法和对象
    js 字符串、数组类型 及方法
    复习一下 Python三元运算
    复习一下 列表
    前端 2 CSS 选择器
    前端 1 HTML
    39
  • 原文地址:https://www.cnblogs.com/dongcheck/p/4483542.html
Copyright © 2011-2022 走看看