当前位置: 首页 > 编程笔记 >

JavaScript页面模板库handlebars的简单用法

晏晨朗
2023-03-14
本文向大家介绍JavaScript页面模板库handlebars的简单用法,包括了JavaScript页面模板库handlebars的简单用法的使用技巧和注意事项,需要的朋友参考一下

Handlebars 是一个 JavaScript 页面模板库,帮助你轻松的构建语义化模板。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>handlebars</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="${base}/js/jquery1.11.min.js"></script>

<script src="${base}/js/handlebars-v3.0.0.js"></script>

</head>

<body>

    <div id=tt style='display: none'>

        <div class="entry">

            <h1>{{title}}</h1>

            <div class="body">{{body}}</div>

        </div>

    </div>

</body>

<script type="text/javascript">

    //$('#tt').before('<script id="temp" type="sfd">');

    //$('#tt').after("</ script>");//

    var source = $("#tt").html();

    //alert(source);

    var template = Handlebars.compile(source);

    var data = {title: "My New Post" , body: "This is my first post!"

    };

    var result = template(data);//将数据 填充到模板

    console.log(result);

    $('#tt').before(result);

</script>

</html>

示例很简单,具体详情可参考ThinkVitamin的文章 Getting Started with Handlebars.js,希望大家能够喜欢。

 类似资料:
  • 英文原文:http://emberjs.com/guides/templates/handlebars-basics/ Ember.js 使用 Handlebars模板库 来增强你的应用程序的用户界面。Handlebars模板与普通的HTML类似,但是它还提供了嵌入表达式来改变显示内容的功能。 我们采用了Handlebars,并且还使用许多强大的功能对其进行了扩展。为了有助于理解,你可以认为Han

  • 本文向大家介绍WordPress中获取所使用的模板的页面ID的简单方法,包括了WordPress中获取所使用的模板的页面ID的简单方法的使用技巧和注意事项,需要的朋友参考一下 什么是模板呢?默认情况 WordPress是使用主题目录下page.php来作为模板显示页面的,但是有时候我们需要不同的模板来显示页面,比如登录、注册和投稿页面等,这些页面跟普通的页面是有所区别,这时候WordPress提供

  • 假设我需要创建一个javascript库,这样: 如果doSome方法工作u对象的值,那么doSome2和doSome3也工作。 但是像这样链接方法呢: 注意:方法可以随机链接,如: 实例:https://jsbin.com/vijehotora/edit?js安慰

  • 我正在寻找一种方法,为jsp页面创建一个模板,与Java中的genereic类的行为类似? 我现在拥有的内容:在我的视图文件夹(web-inf/view/jsp)中,我拥有一个目录列表,其中包含相同的四个文件,这些文件带有他的函数的接收名称(比如,new item、change item、remove item、list)。 在每个组中,jsp页面保存来自我的项目中的一个特定实体类的ou读取数据。

  • 我想在模板引擎的帮助下生成有效的JSON。特别是,我希望引擎用一个模型类的属性替换模板中的占位符。引擎应该允许使用转换器来处理复杂的类,如。此外,我不想显式地处理模板本身中的列表,而是希望任何类似集合的类型生成有效的JSON数组。 这可以是模板的一个示例: 我想从具有relations、firstname和lastname属性的模型中替换此模板中的变量(、、)。这也应该适用于嵌套属性。(例如:)

  • 主要内容:1 概述,2 基本测试模板,3 带Fixtures的基本测试模板,4 使用JUnit Framework的实际示例,5 结论1 概述 在本文中,我们将看到所有JUnit测试用例都遵循的JUnit 4基本模板。这篇文章还解释了JUnit批注的基本用法。   以下模板是一个很好的起点。复制/粘贴和编辑这些模板以适合您的编码样式。 2 基本测试模板 3 带Fixtures的基本测试模板 您可以将@BeforeClass批注添加到要在类中的所有测试之前运行的方法,并将@AfterClass批注