Handlebars使用指南

時間 2019-11-16

標籤 handlebars 使用指南简体版

原文原文鏈接

建立模板

<script id="myTemplate" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> </script>
複製代碼

type類型能夠是除text/javascript之外的任何MIME類型,但推薦使用type="text/template",更加語義化
id是在後面進行編譯的時候所使用,讓其編譯的代碼找到該模板.

渲染模板

var source = $("#myTemplate").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$('#box').html(html);
複製代碼

完整代碼javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<script id="myTemplate" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); var context = {title: "My New Post", body: "This is my first post!"}; var html = template(context); $('#box').html(html); </script>
</body>
</html>
複製代碼

HTML轉義

<div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{{body}}}
        </div>
    </div>
複製代碼

塊級表達式

<script id="myTemplate" type="text/x-handlebars-template"> {{#list people}}{{firstName}} {{lastName}}{{/list}} </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); var context = { people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] }; Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li>"; } return out + "</ul>"; }); var html = template(context); $('#box').html(html); </script>
複製代碼

handlebars路徑

<script id="myTemplate" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div> </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" }; var html = template(context); $('#box').html(html); </script>
複製代碼

{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

{
    "person":
    { "name": "Alan" },
        company:
    {"name": "Rad, Inc." }
};
複製代碼

handlebar內置helper

if

若是變量是false, undefined, null, "", 0, []，將不會渲染html

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{/if}}
</div>
複製代碼

unless

和if相反java

<div class="entry">
  {{#unless license}}
  <h3 class="warning">WARNING: This entry does not have a license!</h3>
  {{/unless}}
</div>
複製代碼

each

能夠用this指代子元素jquery

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>


{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}
複製代碼

渲染結果是ajax

<ul class="people_list">
  <li>Yehuda Katz</li>
  <li>Alan Johnson</li>
  <li>Charles Jolley</li>
</ul>
複製代碼

能夠用else渲染當列表爲空時的頁面less

{{#each paragraphs}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">No content</p>
{{/each}}
複製代碼

若是須要引用列表的索引或者key的話,能夠post

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

{{#each object}}
  {{@key}}: {{this}}
{{/each}}
複製代碼

value 和 key 別名ui

{{#each array as |value key|}}
  {{#each child as |childValue childKey|}}
    {{key}} - {{childKey}}. {{childValue}}
  {{/each}}
{{/each}}
複製代碼

with

<div class="entry">
  <h1>{{title}}</h1>

  {{#with author}}
  <h2>By {{firstName}} {{lastName}}</h2>
  {{/with}}
</div>

{
  title: "My first post!",
  author: {
    firstName: "Charles",
    lastName: "Jolley"
  }
}
複製代碼

或者this

<div class="entry">
  <h1>{{title}}</h1>

  {{#with author as |myAuthor|}}
  <h2>By {{myAuthor.firstName}} {{myAuthor.lastName}}</h2>
  {{/with}}
</div>
複製代碼

Handlebars自定義helper

<script id="myTemplate" type="text/x-handlebars-template"> <div class="post"> <h1>By {{fullName author}}</h1> <div class="body">{{body}}</div> <h1>Comments</h1> {{#each comments}} <h2>By {{fullName author}}</h2> <div class="body">{{body}}</div> {{/each}} </div> </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); var context = { author: {firstName: "Alan", lastName: "Johnson"}, body: "I Love Handlebars", comments: [{ author: {firstName: "Yehuda", lastName: "Katz"}, body: "Me too!" }] }; Handlebars.registerHelper('fullName', function(person) { return person.firstName + " " + person.lastName; }); var html = template(context); $('#box').html(html); </script>
複製代碼

能夠使用this上下文spa

<script id="myTemplate" type="text/x-handlebars-template"> <ul> {{#each items}} <li>{{agree_button}}</li> {{/each}} </ul> </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); var context = { items: [ {name: "Handlebars", emotion: "love"}, {name: "Mustache", emotion: "enjoy"}, {name: "Ember", emotion: "want to learn"} ] }; Handlebars.registerHelper('agree_button', function() { var emotion = Handlebars.escapeExpression(this.emotion), name = Handlebars.escapeExpression(this.name); console.log(emotion) return new Handlebars.SafeString( "<button>I agree. I " + emotion + " " + name + "</button>" ); }); var html = template(context); $('#box').html(html); </script>
複製代碼

模板複用

<script id="myTemplate" type="text/x-handlebars-template"> <div class="post"> {{> userMessage tagName="h1" }} <h1>Comments</h1> {{#each comments}} {{> userMessage tagName="h2" }} {{/each}} </div> </script>
<div id="box"></div>
<script> var source = $("#myTemplate").html(); var template = Handlebars.compile(source); Handlebars.registerPartial('userMessage', '<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>' + '<div class="body">{{body}}</div>'); var context = { author: {firstName: "Alan", lastName: "Johnson"}, body: "I Love Handlebars", comments: [{ author: {firstName: "Yehuda", lastName: "Katz"}, body: "Me too!" }] }; var html = template(context); $('#box').html(html); </script>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。