Làm cách nào để thêm giao diện điều khiển console.log() JavaScript bên trong một mẫu Handlebars?

Question

Tôi đang trong quá trình xây dựng một ứng dụng Meteor mới và tôi không thể tìm ra cách thêm logic JavaScript với Handlebars để chạy console.log() trước mỗi vòng lặp của tôi. Trong xương sống tôi sẽ chỉ làm, <% console.log(data); %> để kiểm tra dữ liệu đã được truyền vào.
Tôi không chắc chắn làm thế nào để làm điều này với Meteor và Handlebars và tôi không thể tìm thấy giải pháp trên trang web của họ.

Answer 1

Tạo một helper tay lái trong một trong các tập tin JavaScript client-nạp trong dự án của bạn:

Template.registerHelper("log", function(something) { 
    console.log(something); 
}); 

Và sau đó gọi nó trong mẫu của bạn:

{{log someVariable}} 

Bạn có thể đăng nhập bối cảnh hiện nay với chỉ cần {{log this}}.

(Lưu ý rằng trong Meteor trước khi phiên bản 0.8, hoặc ở tay lái thuần khiết bên ngoài của một ứng dụng Meteor, thay thế Template.registerHelper với Handlebars.registerHelper.)

Answer 2

tôi thấy helper này là khá hữu ích

Handlebars.registerHelper("debug", function(optionalValue) { 
    console.log("Current Context"); 
    console.log("===================="); 
    console.log(this); 
    if (optionalValue) { 
     console.log("Value"); 
     console.log("===================="); 
     console.log(optionalValue); 
    } 
}); 

sau đó bạn có thể sử dụng nó trong hai cách

chỉ là một đơn giản

{{debug}} 

mà sẽ in ra bối cảnh hiện nay

hoặc kiểm tra một giá trị duy nhất

{{debug val}} 

chỉ in ra giá trị mà

Answer 3

Handlebars v3 đã tích hợp sẵn trong nhật ký helper bây giờ. Bạn có thể đăng nhập vào giao diện điều khiển từ bên trong một mẫu

{{log this}} 

Bạn có thể thiết lập mức độ khai thác gỗ như vậy

Handlebars.logger.level = 0; // for DEBUG 

Answer 4

Tôi làm điều này,

Handlebars.registerHelper('log', function(content) { 
    console.log(content.fn(this)); 
    return ''; 
}); 

cho phép tôi để mã hóa một trình gỡ lỗi khối, sử dụng hệ thống templating Tôi đang ngồi bên trong. Vì vậy, tôi có thể cung cấp cho nó một khối và nó sẽ giải quyết nội dung nhưng chỉ cần gửi nó đến console.log.

{{#log}} title is {{title}} {{/log}} 

tôi cũng làm điều này

$('script[type="text/x-handlebars-template"]').each(function(){ 
    Handlebars.registerPartial(this.id,$(this).html()); 
}); 

mà làm cho tất cả các mẫu của tôi có sẵn như là partials, cho phép tôi để KHÔ lên mẫu của tôi thành các khối chức năng tái sử dụng mà không cần phải chỉnh sửa bất cứ điều gì khác hơn so với mẫu tự .

Vì vậy, tôi bây giờ có thể làm những việc như

{{#log}}Attribute listing {{>Attributes}}{{log}} 

với

<script id="Attributes" type="text/x-handlebars-template"> 
{{#each attributes}} 
    {{@key}}={{this}} 
{{/each}} 
</script> 

Answer 5

tôi luôn luôn sử dụng các helper sau: nó có thể ghi dữ liệu và thêm một breakpoint tùy chọn. Bằng cách này bạn có thể kiểm tra bối cảnh tay lái hiện trong trình gỡ lỗi trình duyệt ;-)

Tìm thấy trên https://gist.github.com/elgervb/5c38c8d70870f92ef6338a291edf88e9

/** 
* Register a debug helper for Handlebars to be able to log data or inspect data in the browser console 
* 
* Usage: 
* {{debug someObj.data}} => logs someObj.data to the console 
* {{debug someObj.data true}} => logs someObj.data to the console and stops at a debugger point 
* 
* Source: https://gist.github.com/elgervb/5c38c8d70870f92ef6338a291edf88e9 
* 
* @param {any} the data to log to console 
* @param {boolean} whether or not to set a breakpoint to inspect current state in debugger 
*/ 
Handlebars.registerHelper('debug', function(data, breakpoint) { 
    console.log(data); 
    if (breakpoint === true) { 
     debugger; 
    } 
    return ''; 
});