Handlebars nhỏ nhưng có võ

https://viblo.asia/p/handlebars-nho-nhung-co-vo-MgNvWXbaGYx

Handlebars nhỏ nhưng có võ

This post has been more than 4 years since it was last updated.

Một việc mà ai cũng ngại khi viết js

• Bạn không lạ gì đoạn code như thế này:

<div id='user_info'></div>
<script type="text/javascript">
    var user = {
    firstname: 'irst name',
    lastname: 'ast name',
    email: '[e-mail]',
    info: 'nfo',
    age: 10,
};
var str = user.firstname + '<br>'
str += user.lastname + '<br>'
str += user.email + '<br>'
str += user.info + '<br>'
str += user.age + '<br>'
$('#user_info').html(str);
</script>

• Đoạn code trên làm nhiệm vụ build html hiển thị thông tin của một user từ một nguồn giữ liệu nào đó (có thể là một funtion ajax chẳng hạn). Vấn đề ở chỗ, cứ mỗi thông tin cần hiển thị ta đều phải thực hiện một câu lệnh tạo mới và ghép string. Việc làm trên không chỉ mất thời gian mà còn rất khó cho việc maintain

• Khi bạn đã từng code angular js sẽ thấy angular có thể binding data vào templete rất nhanh gọn. Khi quay trở lại với javascript thuần hẳn là bạn rất mong nó cũng có thể làm được điều này. Vậy có cách nào không?. May là có!.

Handlebars

• Handlebars là một thư viện javascrip rất mạnh mẽ hỗ trợ bạn có thể binding data vào một templete để hiển thị ra website.

Cài đặt

- Npm: `npm install --save handlebars`
- Bower `bower install --save handlebars`
- Download:  https://github.com/wycats/handlebars.js/
- Cdn:  https://cdnjs.com/libraries/handlebars.js/

Sử dụng

ví dụ

• Cũng ví dụ trên ta sẽ viết lại với handlebars như sau:

<script id="demo_user" type="text/x-handlebars-template">
    {{ #each user }}
        @{{ this }} <br>
    {{ /each }}
</script>
<div id='user_info'></div>
<script type="text/javascript">
    var user = {
        firstname: 'First name',
        lastname: 'Last name',
        email: '[e-mail]',
        info: 'info',
        age: 10
    };
var source = $("#demo_user").html();
var template = Handlebars.compile(source);
$('#user_info').html(template(user));
</script>

• Vẫn chức năng build giao diện hiển thị thông tin user như trên nhưng mọi chuyện giờ đã minh bạch hơn rất nhiều. khi cần chỉnh sửa ta cũng chỉ cần sửa trong template mà không cần cotrol vào từng dòng code js nữa.

Cú pháp

• templete

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

• • Templete sẽ nằm trong thẻ script và có id để ta có thể gọi khi cần

• • Cú pháp để reder data cũng gần giống với angular js. Được nằm giữa 2 dấu {{ a }}

• • Lưu ý: khi cú pháp trên bị xung đột với framewrok của bạn đang sử dụng như Laravel chẳng hạn thì bạn có ể thêm @ vào đăng trước như sau @{{ a }}

• Compile a template

var source = $("#demo_user").html();
var template = Handlebars.compile(source);

• Vòng lặp each

    {{ #each user }}
        @{{ this }} <br>
    {{ /each }}

• Điều kiện if

  {{#if title}}
//html
  {{/if}}

• Helpers

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;
});

• • Để đăng ký một helper ta sử dụng Handlebars.registerHelper('name', function(val) {}

• • Khi sử dụng ta chỉ cần gọi như sau

{{name val}}

Tài liệu tham khảo

• http://handlebarsjs.com/