{"id":1837,"date":"2013-02-13T14:00:00","date_gmt":"2013-02-13T20:00:00","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1837"},"modified":"2013-02-13T07:43:14","modified_gmt":"2013-02-13T13:43:14","slug":"how-to-debug-an-underscore-js-template","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1837","title":{"rendered":"How to debug an underscore.js template"},"content":{"rendered":"<p>Given a simple template like this:<\/p>\n<pre class=\"csharpcode\"><span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;solution&quot;<\/span> <span class=\"attr\">data-question-id<\/span><span class=\"kwrd\">=&quot;&lt;%= model.get('Id') %&gt;&quot;<\/span><span class=\"kwrd\">&gt;<\/span>    \n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;title&quot;<\/span><span class=\"kwrd\">&gt;<\/span><span class=\"asp\">&lt;%<\/span>= model.get(<span class=\"str\">'Name'<\/span>) <span class=\"asp\">%&gt;<\/span><span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;company&quot;<\/span><span class=\"kwrd\">&gt;<\/span><span class=\"asp\">&lt;%<\/span>= model.get(<span class=\"str\">'Company'<\/span>) <span class=\"asp\">%&gt;<\/span><span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;version&quot;<\/span><span class=\"kwrd\">&gt;<\/span><span class=\"asp\">&lt;%<\/span>= model.get(<span class=\"str\">'Version'<\/span>) <span class=\"asp\">%&gt;<\/span><span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;detail&quot;<\/span><span class=\"kwrd\">&gt;<\/span><span class=\"asp\">&lt;%<\/span>= model.get(<span class=\"str\">'Summary'<\/span>) <span class=\"asp\">%&gt;<\/span><span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;actions&quot;<\/span><span class=\"kwrd\">&gt;<\/span>\n        <span class=\"kwrd\">&lt;<\/span><span class=\"html\">a<\/span> <span class=\"attr\">href<\/span><span class=\"kwrd\">=&quot;\/#solution\/&lt;%= Id %&gt;\/&lt;%= model.get('Id') %&gt;&quot;<\/span><span class=\"kwrd\">&gt;<\/span>Detail<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">a<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span><\/pre>\n<p>And using your favorite JavaScript interactive debugger (Visual Studio 2012 is my favorite when I\u2019m doing MVC 4 Razor development), just add a debugger statement within your template temporarily:<\/p>\n<pre class=\"csharpcode\"><span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;solution&quot;<\/span> <span class=\"attr\">data-question-id<\/span><span class=\"kwrd\">=&quot;&lt;%= model.get('Id') %&gt;&quot;<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"asp\">&lt;%<\/span> debugger; <span class=\"asp\">%&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;title&quot;<\/span><span class=\"kwrd\">&gt;<\/span><span class=\"asp\">&lt;%<\/span>= model.get(<span class=\"str\">'Name'<\/span>) <span class=\"asp\">%&gt;<\/span><span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span><\/pre>\n<style type=\"text\/css\">\n.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }<\/style>\n<p>Assuming debugging is enabled, this will break (in Visual Studio for example) on the debugger line whenever your code template is executed.<\/p>\n<p>The emitted template code thankfully has line feeds embedded so it\u2019s readable:<\/p>\n<pre class=\"csharpcode\"><span class=\"kwrd\">function<\/span> anonymous(obj,_) {\n<span class=\"kwrd\">var<\/span> __t,__p=<span class=\"str\">''<\/span>,__j=Array.prototype.join,print=<span class=\"kwrd\">function<\/span>(){__p+=__j.call(arguments,<span class=\"str\">''<\/span>);};\nwith(obj||{}){\n__p+=<span class=\"str\">'&lt;div class=&quot;solution&quot; data-question-id=&quot;'<\/span>+\n((__t=( model.get(<span class=\"str\">'Id'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&quot;&gt;\\r\\n    '<\/span>;\n debugger; \n__p+=<span class=\"str\">'\\r\\n    &lt;div class=&quot;title&quot;&gt;'<\/span>+\n((__t=( model.get(<span class=\"str\">'Name'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&lt;\/div&gt;\\r\\n    &lt;div class=&quot;company&quot;&gt;'<\/span>+\n((__t=( model.get(<span class=\"str\">'Company'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&lt;\/div&gt;\\r\\n    &lt;div class=&quot;version&quot;&gt;'<\/span>+\n((__t=( model.get(<span class=\"str\">'Version'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&lt;\/div&gt;\\r\\n    &lt;div class=&quot;detail&quot;&gt;'<\/span>+\n((__t=( model.get(<span class=\"str\">'Summary'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&lt;\/div&gt;\\r\\n    &lt;div class=&quot;actions&quot;&gt;\\r\\n        &lt;a href=&quot;\/#solution\/'<\/span>+\n((__t=( Id ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'\/'<\/span>+\n((__t=( model.get(<span class=\"str\">'Id'<\/span>) ))==<span class=\"kwrd\">null<\/span>?<span class=\"str\">''<\/span>:__t)+\n<span class=\"str\">'&quot;&gt;Detail&lt;\/a&gt;\\r\\n    &lt;\/div&gt;\\r\\n&lt;\/div&gt;\\r\\n'<\/span>;\n}\n<span class=\"kwrd\">return<\/span> __p;\n\n}<\/pre>\n<p>You&#8217;ll see the debugger emitted in-line. It\u2019s very handy for inspect the values of variables, objects, etc. In the example above, I wanted to confirm that the model being passed was in the proper format. <\/p>\n<p>I\u2019ve used it many times to help debug a template that wasn\u2019t working the way I\u2019d expected.<\/p>\n<p>This also works well in Chrome\u2019s debugger. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Given a simple template like this: &lt;div class=&quot;solution&quot; data-question-id=&quot;&lt;%= model.get(&#8216;Id&#8217;) %&gt;&quot;&gt; &lt;div class=&quot;title&quot;&gt;&lt;%= model.get(&#8216;Name&#8217;) %&gt;&lt;\/div&gt; &lt;div class=&quot;company&quot;&gt;&lt;%= model.get(&#8216;Company&#8217;) %&gt;&lt;\/div&gt; &lt;div class=&quot;version&quot;&gt;&lt;%= model.get(&#8216;Version&#8217;) %&gt;&lt;\/div&gt; &lt;div class=&quot;detail&quot;&gt;&lt;%= model.get(&#8216;Summary&#8217;) %&gt;&lt;\/div&gt; &lt;div class=&quot;actions&quot;&gt; &lt;a href=&quot;\/#solution\/&lt;%= Id %&gt;\/&lt;%= model.get(&#8216;Id&#8217;) %&gt;&quot;&gt;Detail&lt;\/a&gt; &lt;\/div&gt; &lt;\/div&gt; And using your favorite JavaScript interactive debugger (Visual Studio 2012 is my favorite when I\u2019m doing MVC 4 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[38,133],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-tD","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1820,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1820","url_meta":{"origin":1837,"position":0},"title":"Knockout binding for JavaScript route fixup","date":"January 25, 2013","format":false,"excerpt":"Part one. After the first round, I felt compelled to KnockOut the code a bit more. I\u2019d mentioned I wasn\u2019t pleased with the code exactly. It needed some refactoring. So, I\u2019ve created a new Knockout binding handler. This binding handler replaces\u00a0 named parameters with a model\u2019s properties in a path.\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1345,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1345","url_meta":{"origin":1837,"position":1},"title":"Creating a simple Entity Reference system for Ember.js","date":"December 28, 2011","format":false,"excerpt":"I had some data stored in a structure similar to this: Nothing too fancy. A table of Gift(s) and a table of Person(s). Each gift had a foreign key relationship to a Person (the person who \u201cgave\u201d the gift). Since some people may give several gifts, I didn\u2019t want to\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1397,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1397","url_meta":{"origin":1837,"position":2},"title":"A post not related to Nest thermostat hardware&hellip;.","date":"January 3, 2012","format":false,"excerpt":"I typed in https:\/\/www.nest.com this evening and instead of the nice looking Nest.com web site, I got this: What?! I hadn\u2019t actually noticed that I\u2019d typed https at first, so I was a bit baffled for a moment. After closer investigation, Nest doesn\u2019t have HTTPS apparently for their marketing\/support web\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"SNAGHTML69c9dbf8","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/01\/SNAGHTML69c9dbf8_thumb.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1996,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1996","url_meta":{"origin":1837,"position":3},"title":"Animating an element&rsquo;s visibility using AngularJS","date":"January 31, 2014","format":false,"excerpt":"There was a question on StackOverflow about animating an element and I wanted to give it a shot, so here goes: http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/ \u00a0 Imagine nearly the simplest Angular JS application possible: <div ng-app=\"App\"> <div ng-init=\"checked=true\"> <div> <label> <input type=\"checkbox\" ng-model=\"checked\" \/>Is Visible...<\/label> <\/div> <div class=\"sample\" ng-class=\"{ hidden: !checked }\">Visible...<\/div> <\/div>\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1836,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1836","url_meta":{"origin":1837,"position":4},"title":"Smarter queuing of files using jQuery deferred and when","date":"February 13, 2013","format":false,"excerpt":"I had a somewhat simple need \u2026a single web page style application using Backbone.JS had multiple template files it needed to download, if and only if the files hadn\u2019t already been downloaded before. While I suppose I could have relied on browser caching, I wanted to manage the requests in\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1835,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1835","url_meta":{"origin":1837,"position":5},"title":"How to rewrite a MongoDB C# LINQ with a Projection Requirement using a MongoCursor","date":"January 26, 2013","format":false,"excerpt":"The LINQ Provider for MongoDB does not currently take into account data projections efficiently when returning data. This could mean that you\u2019re unnecessarily returning more data from the database than is needed. So, I\u2019m going to show you the pattern I applied as a replacement for the LINQ queries when\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1837"}],"collection":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/comments?post=1837"}],"version-history":[{"count":0,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1837\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/media?parent=1837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/categories?post=1837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/tags?post=1837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}