Chúng tôi đã đề cập đến việc tạo khuôn mẫu với Handlebars trong video cuối cùng. Nhưng Handlebars không phải là giải pháp tạo khuôn mẫu duy nhất trên khối. Trong video này, chúng tôi sẽ sử dụng khuôn mẫu có sẵn trong Dấu gạch dưới.
Tại sao? Một lý do là bạn có thể đã sử dụng Dấu gạch dưới trong dự án của mình. Đây là một thư viện cực kỳ phổ biến vì giống như jQuery, nó cung cấp một loạt các phương pháp hữu ích hoạt động trên nhiều trình duyệt. Như họ nói:
Đó là sự ràng buộc để đi cùng với bộ tux của jQuery và dây treo của Backbone.js.
Nếu bạn đã sử dụng Underscore, đó sẽ là một động lực lớn để sử dụng nó.
Cũng trong thử nghiệm nhanh của tôi, Handlebars 1.0.0 là 14,2 KB được nén và rút gọn và Underscore là 4,9 KB được nén và rút gọn. Handlebars chỉ đơn giản là có nhiều tính năng hơn (ví dụ: bình luận, vòng lặp, đường dẫn, logic, v.v.). Trong bản demo đơn giản của chúng tôi, chúng tôi không cần những tính năng đó, vì vậy nó không chính xác là một sự so sánh công bằng, nhưng ồ chúng tôi chỉ đang học hỏi.
Thay vì có mẫu trong HTML, chúng ta cần xác định các mẫu Dấu gạch dưới trong JavaScript. Chúng ta quay lại một số cách nối chuỗi.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledsau đó biến thành một hàm mà chúng ta có thể gọi với ngữ cảnh đối tượng dữ liệu của mình và trả về HTML tất cả đã được điền đầy đủ dữ liệu đó. Để hiệu quả, chúng tôi sẽ nối HTML trả về thành một chuỗi lớn để chúng tôi có thể nối nó vào DOM chỉ một lần:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Trong video này, chúng tôi cũng đã tóm tắt việc lấy dữ liệu. Chúng tôi đã tạo một nguồn JSON và sử dụng hàm $ .getJSON () của jQuery để lấy nó. Giống như chúng ta có thể phải làm trong “cuộc sống thực”.
$.getJSON("/path/to/json.js", function(data) ( ));Vòng lặp for của chúng tôi và vòng lặp dựa trên dữ liệu đó sẽ được gọi lại ở đó. Hoặc nhiều khả năng hơn, hãy gọi một số chức năng được đặt tên tốt khác để xử lý điều đó, giữ cho mọi thứ được tách biệt rõ ràng.
Đây là nơi chúng tôi đã kết thúc:
Xem Pen IpAdn của Chris Coyier (@chriscoyier) trên CodePen
Cần lưu ý rằng LoDash tương thích 100% với những gì chúng tôi đã làm ở đây. Tôi không chắc liệu LoDash templating có tốt hơn / nhanh hơn / chậm hơn / tệ hơn so với Underscore hay không, nhưng tôi đã hoán đổi các thư viện và bản demo hoạt động tốt.