INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1004, 3, '2010-07-09 10:39:24', '2010-07-09 14:39:24', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name + &quot; &quot; + age}&lt;/a&gt;&lt;/li&gt;\r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-3', '', '', '2010-07-09 10:39:24', '2010-07-09 14:39:24', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-3/', 0, 'revision', '', 0),
(1005, 3, '2010-07-09 10:48:50', '2010-07-09 14:48:50', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\n\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\n\nI could do something like this:\n\n[code language="js"]\nvar clRec = &quot;&quot;;\n\nfor(var i=0; i&lt;client.name.length; i++) {\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\n}\n[/code]\n\nbut to me, this seems much more readable and maintainable:\n\n[code language="js"]\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\n[/code]\n\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\n\n[code language="js"]\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \n[/code]\n\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\n\n[code language="js"]\n	var clientData = [\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\n	];\n[/code]\n\nNow, define your template:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\n&lt;/script&gt;\n[/code]\n\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\n\nThen call the jQuery Template to render the data using your template: \n\n[code language="js"]\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\n[/code]\n\n\n\n[code language="html"]\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt; \n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \n  &lt;title&gt;Canvas Test&lt;/title&gt; \n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \n  &lt;script type=&quot;text/javascript&quot;&gt;\n  $(document).ready(function() {\n\n	var clientData = [\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\n	];\n\n\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\n\n\n});\n  &lt;/script&gt;\n\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\n&lt;/script&gt;\n  \n&lt;/head&gt; \n \n&lt;body&gt; \n\n&lt;div id=&quot;headline&quot;&gt;&lt;/div&gt;\n&lt;ul&gt;&lt;/ul&gt;\n\n\n&lt;/body&gt; \n&lt;/html&gt; \n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-4', '', '', '2010-07-09 10:48:50', '2010-07-09 14:48:50', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-4/', 0, 'revision', '', 0),
(1006, 3, '2010-07-09 10:48:50', '2010-07-09 14:48:50', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\n\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div id=&quot;headline&quot;&gt;&lt;/div&gt;\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-5', '', '', '2010-07-09 10:48:50', '2010-07-09 14:48:50', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-5/', 0, 'revision', '', 0),
(1007, 3, '2010-07-09 10:48:55', '2010-07-09 14:48:55', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\n\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div id=&quot;headline&quot;&gt;&lt;/div&gt;\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-6', '', '', '2010-07-09 10:48:55', '2010-07-09 14:48:55', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-6/', 0, 'revision', '', 0),
(1008, 3, '2010-07-09 10:51:25', '2010-07-09 14:51:25', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag.\r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime.\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div id=&quot;headline&quot;&gt;&lt;/div&gt;\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-7', '', '', '2010-07-09 10:51:25', '2010-07-09 14:51:25', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-7/', 0, 'revision', '', 0),
(1009, 3, '2010-07-09 10:51:33', '2010-07-09 14:51:33', 'In preparation for my upcoming talk on jQuery Templates, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag.\r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime.\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div id=&quot;headline&quot;&gt;&lt;/div&gt;\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-8', '', '', '2010-07-09 10:51:33', '2010-07-09 14:51:33', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-8/', 0, 'revision', '', 0),
(1010, 3, '2010-07-09 10:54:46', '2010-07-09 14:54:46', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag.\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-9', '', '', '2010-07-09 10:54:46', '2010-07-09 14:54:46', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-9/', 0, 'revision', '', 0),
(1011, 3, '2010-07-09 10:56:38', '2010-07-09 14:56:38', '', 'template', 0, '', 'inherit', 'open', 'open', '', 'template', '', '', '2010-07-09 10:56:38', '2010-07-09 14:56:38', '', 1001, 'http://blog.reybango.com/wp-content/uploads/2010/07/template.png', 0, 'attachment', 'image/png', 0),
(1012, 3, '2010-07-09 10:54:51', '2010-07-09 14:54:51', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag.\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-10', '', '', '2010-07-09 10:54:51', '2010-07-09 14:54:51', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-10/', 0, 'revision', '', 0),
(1019, 3, '2010-07-09 11:00:02', '2010-07-09 15:00:02', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-17', '', '', '2010-07-09 11:00:02', '2010-07-09 15:00:02', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-17/', 0, 'revision', '', 0),
(1014, 3, '2010-07-09 10:57:04', '2010-07-09 14:57:04', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-12', '', '', '2010-07-09 10:57:04', '2010-07-09 14:57:04', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-12/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1013, 3, '2010-07-09 10:56:49', '2010-07-09 14:56:49', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/template.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" /></a>\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-11', '', '', '2010-07-09 10:56:49', '2010-07-09 14:56:49', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-11/', 0, 'revision', '', 0),
(1015, 3, '2010-07-09 10:57:09', '2010-07-09 14:57:09', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-13', '', '', '2010-07-09 10:57:09', '2010-07-09 14:57:09', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-13/', 0, 'revision', '', 0),
(1016, 3, '2010-07-09 10:57:57', '2010-07-09 14:57:57', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-14', '', '', '2010-07-09 10:57:57', '2010-07-09 14:57:57', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-14/', 0, 'revision', '', 0),
(1017, 3, '2010-07-09 10:58:46', '2010-07-09 14:58:46', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-15', '', '', '2010-07-09 10:58:46', '2010-07-09 14:58:46', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-15/', 0, 'revision', '', 0),
(1018, 3, '2010-07-09 10:58:54', '2010-07-09 14:58:54', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, age: &quot;32&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, age: &quot;51&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-16', '', '', '2010-07-09 10:58:54', '2010-07-09 14:58:54', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-16/', 0, 'revision', '', 0),
(1020, 3, '2010-07-09 11:00:06', '2010-07-09 15:00:06', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Canvas Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-18', '', '', '2010-07-09 11:00:06', '2010-07-09 15:00:06', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-18/', 0, 'revision', '', 0),
(1021, 3, '2010-07-09 11:00:37', '2010-07-09 15:00:37', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-19', '', '', '2010-07-09 11:00:37', '2010-07-09 15:00:37', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-19/', 0, 'revision', '', 0),
(1022, 3, '2010-07-09 11:00:42', '2010-07-09 15:00:42', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-20', '', '', '2010-07-09 11:00:42', '2010-07-09 15:00:42', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-20/', 0, 'revision', '', 0),
(1023, 3, '2010-07-09 11:01:25', '2010-07-09 15:01:25', 'In preparation for my <a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png">upcoming talk on jQuery Templates</a>, I''ve been been deep diving into the <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin created by Microsoft.</a>. Many of you are probably familiar with server-side template engines like Smarty or Cheetah but only recently have client-side template engines taken off. Considering how complex our web apps are becoming, it makes total sense.\r\n\r\nThe cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.\r\n\r\nI could do something like this:\r\n\r\n[code language="js"]\r\nvar clRec = &quot;&quot;;\r\n\r\nfor(var i=0; i&lt;client.name.length; i++) {\r\n    clRec += &quot;&lt;li&gt;&lt;a href=''clients/&quot;+client.id[i]+&quot;''&gt;&quot; + client.name[i] + &quot;&lt;/a&gt;&lt;/li&gt;&quot;;\r\n}\r\n[/code]\r\n\r\nbut to me, this seems much more readable and maintainable:\r\n\r\n[code language="js"]\r\n&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n[/code]\r\n\r\nThe second code snippet is a template I''ve created to render a hyperlinked name in a list and it''s very easy to do. First, include both jQuery and the jQuery Template plugin into your page:\r\n\r\n[code language="js"]\r\n&lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n&lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n[/code]\r\n\r\nNext, define the data that you''d like to see rendered. This could be data derived from an XHR call or something you''ve predefined, like this:\r\n\r\n[code language="js"]\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n[/code]\r\n\r\nNow, define your template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nYep, the "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we''ve defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.\r\n\r\nThen call the jQuery Template plugin to render the data using your template: \r\n\r\n[code language="js"]\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n[/code]\r\n\r\nThe plugin''s <em>.tmpl()</em> method accepts the data we''ve defined and handles the parsing of the template we''ve selected. Then we use jQuery''s <em>.appendTo()</em> method to append the results to an unordered list tag. This gives me the following results:\r\n\r\n<img src="http://blog.reybango.com/wp-content/uploads/2010/07/template.png" alt="" title="template" width="223" height="131" class="alignleft size-full wp-image-1011" />\r\n\r\nThat''s it! Told you it was simple. :) \r\n\r\nI''ll go into more advanced details during my presentation but this should give you something to start with in the meantime. Here''s the full source for you to use:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n	var clientData = [\r\n		{ name: &quot;Rey Bango&quot;, id: 1 },\r\n		{ name: &quot;Mark Goldberg&quot;, id: 2 },\r\n		{ name: &quot;Jen Statford&quot;, id: 3 }\r\n	];\r\n\r\n\r\n$(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo( &quot;ul&quot; );\r\n\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n &lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;li&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name}&lt;/a&gt;&lt;/li&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;ul&gt;&lt;/ul&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]', 'Not Using jQuery JavaScript Templates? You''re Really Missing Out.', 0, '', 'inherit', 'open', 'open', '', '1001-revision-21', '', '', '2010-07-09 11:01:25', '2010-07-09 15:01:25', '', 1001, 'http://blog.reybango.com/2010/07/09/1001-revision-21/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1024, 3, '2010-07-08 14:13:37', '2010-07-08 18:13:37', '<a href="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/tv-jquery-con.png" alt="" title="tv-jquery-con" width="506" height="93" class="alignleft size-full wp-image-979" /></a>\r\n\r\nThis coming Monday (7/12/2010), I''ll be one of the speakers at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin''s jQuery Online Conference</a>. I''ll be speaking about using the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Template plugin</a> to produce easily maintainable dynamic pages via pre-built JavaScript templates. This is a great topic and it looks like the event is generating a lot of registrations. Very cool. \r\n\r\nI''ll be joined by three other awesome speakers including John Resig, Karl Swedberg and Ben Alman. Here''s the breakdown of the sessions:\r\n\r\n<h3>Topics and schedule</h3>\r\n<br />\r\n<ul>\r\n	<li><strong>Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data \r\n<em>Rey Bango</em></strong>\r\nIn this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.</li>\r\n	<li><strong>Testing Your Mobile Web Apps \r\n<em>John Resig</em></strong>\r\nThis talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that''s been done by the jQuery team. We''ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we''ll examine some of the testing tools that can be used to make the whole process much easier.</li>\r\n	<li><strong>Taking jQuery Effects to the Next Level\r\n<em>Karl Swedberg</em></strong>\r\nOne of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery''s core effects. In this talk, we''ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We''ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.</li>\r\n	<li><strong>jQuery Pluginization \r\n<em>Ben Alman</em></strong> \r\nIn this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.</li>\r\n</ul>\r\n\r\nThis really is a great lineup and I''m looking forward to being a part of this great event. It''s been a very long time since I''ve done a presentation so this will be a good warm up for some other conferences I plan on speaking at later this year.\r\n\r\nBe sure to use the following discount code for a 15% discount on registration: <strong>jquery15</strong> \r\n', 'I''m Presenting on jQuery Templates at ThinkVitamin''s jQuery Online Conference', 0, '', 'inherit', 'open', 'open', '', '978-revision-22', '', '', '2010-07-08 14:13:37', '2010-07-08 18:13:37', '', 978, 'http://blog.reybango.com/2010/07/08/978-revision-22/', 0, 'revision', '', 0),
(1026, 3, '2010-07-12 12:00:15', '2010-07-12 16:00:15', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" contains the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'publish', 'open', 'open', '', 'jquery-javascript-templates-tutorial-nesting-templates', '', '\nhttp://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/', '2010-07-10 23:48:44', '2010-07-11 03:48:44', '', 0, 'http://blog.reybango.com/?p=1026', 0, 'post', '', 28),
(1027, 3, '2010-07-10 13:19:41', '2010-07-10 17:19:41', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\n\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\n\n[code language="js"]\n       var clientData = [\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\n        ];\n[/code]\n\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\n\nLike I showed in my previous post, we first create a template for our layout:\n\n[code language="js"][/code]\n<script id="clientTemplate" type="text/html">\n	<p><a href="clients/${id}">${name} - Age: ${age}</a></p>\n    {{tmpl($data) "#ageTemplate"}}\n\n    <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>\n</script>\n', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision', '', '', '2010-07-10 13:19:41', '2010-07-10 17:19:41', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision/', 0, 'revision', '', 0),
(1028, 3, '2010-07-10 13:21:13', '2010-07-10 17:21:13', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\n\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\n\n[code language="js"]\n       var clientData = [\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\n        ];\n[/code]\n\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\n\nLike I showed in my previous post, we first create a template for our layout:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n&lt;/script&gt;\n[/code]\n\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone\n', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-2', '', '', '2010-07-10 13:21:13', '2010-07-10 17:21:13', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-2/', 0, 'revision', '', 0),
(1029, 3, '2010-07-10 13:25:07', '2010-07-10 17:25:07', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\n\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\n\n[code language="js"]\n       var clientData = [\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\n        ];\n[/code]\n\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\n\nLike I showed in my previous post, we first create a template for our layout:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n&lt;/script&gt;\n[/code]\n\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\n\n[code language="js"]\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\n&lt;/script&gt;\n[/code]\n\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\n\n[code language="js"]\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\n[/code]\n\nand we''re going to include it into the main template:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\n&lt;/script&gt;\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-3', '', '', '2010-07-10 13:25:07', '2010-07-10 17:25:07', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-3/', 0, 'revision', '', 0),
(1030, 3, '2010-07-10 13:25:11', '2010-07-10 17:25:11', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-4', '', '', '2010-07-10 13:25:11', '2010-07-10 17:25:11', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-4/', 0, 'revision', '', 0),
(1031, 3, '2010-07-10 13:25:16', '2010-07-10 17:25:16', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-5', '', '', '2010-07-10 13:25:16', '2010-07-10 17:25:16', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-5/', 0, 'revision', '', 0),
(1032, 3, '2010-07-10 13:25:52', '2010-07-10 17:25:52', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-6', '', '', '2010-07-10 13:25:52', '2010-07-10 17:25:52', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-6/', 0, 'revision', '', 0),
(1033, 3, '2010-07-10 13:25:55', '2010-07-10 17:25:55', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n\r\n&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-7', '', '', '2010-07-10 13:25:55', '2010-07-10 17:25:55', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-7/', 0, 'revision', '', 0),
(1034, 3, '2010-07-10 13:28:20', '2010-07-10 17:28:20', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-8', '', '', '2010-07-10 13:28:20', '2010-07-10 17:28:20', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-8/', 0, 'revision', '', 0),
(1035, 3, '2010-07-10 13:34:24', '2010-07-10 17:34:24', '', 'nested', 0, '', 'inherit', 'open', 'open', '', 'nested', '', '', '2010-07-10 13:34:24', '2010-07-10 17:34:24', '', 1026, 'http://blog.reybango.com/wp-content/uploads/2010/07/nested.png', 0, 'attachment', 'image/png', 0),
(1036, 3, '2010-07-10 13:33:16', '2010-07-10 17:33:16', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-9', '', '', '2010-07-10 13:33:16', '2010-07-10 17:33:16', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-9/', 0, 'revision', '', 0),
(1037, 3, '2010-07-10 13:39:52', '2010-07-10 17:39:52', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n\r\n\r\n', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-10', '', '', '2010-07-10 13:39:52', '2010-07-10 17:39:52', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-10/', 0, 'revision', '', 0),
(1038, 3, '2010-07-10 13:39:58', '2010-07-10 17:39:58', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n\r\n\r\n', 'Nesting jQuery JavaScript Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-11', '', '', '2010-07-10 13:39:58', '2010-07-10 17:39:58', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-11/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1039, 3, '2010-07-10 13:40:44', '2010-07-10 17:40:44', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-12', '', '', '2010-07-10 13:40:44', '2010-07-10 17:40:44', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-12/', 0, 'revision', '', 0),
(1040, 3, '2010-07-10 13:40:52', '2010-07-10 17:40:52', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-13', '', '', '2010-07-10 13:40:52', '2010-07-10 17:40:52', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-13/', 0, 'revision', '', 0),
(1046, 3, '2010-07-10 13:47:34', '2010-07-10 17:47:34', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout o\n\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\n\n[code language="js"]\n       var clientData = [\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\n        ];\n[/code]\n\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\n\nLike I showed in my previous post, we first create a template for our layout:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n&lt;/script&gt;\n[/code]\n\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\n\n[code language="js"]\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\n&lt;/script&gt;\n[/code]\n\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\n\n[code language="js"]\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\n[/code]\n\nand we''re going to include it into the main template:\n\n[code language="js"]\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\n&lt;/script&gt;\n[/code]\n\nThis will generate the following results:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\n\nThere are a couple of key things to understand here. First, let''s look at the following:\n\n[code language="js"]\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\n[/code]\n\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\n\n[code language="js"]\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\n&lt;/script&gt;\n[/code]\n\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\n\nHere''s the whole code for you to work with:\n\n[code language="html"]\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt; \n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \n  &lt;title&gt;Template Test&lt;/title&gt; \n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \n  &lt;script type=&quot;text/javascript&quot;&gt;\n  $(document).ready(function() {\n\n        var clientData = [\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\n        ];\n\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\n\n});\n  &lt;/script&gt;\n\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\n&lt;/script&gt;\n\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\n&lt;/script&gt;\n  \n&lt;/head&gt; \n \n&lt;body&gt; \n\n&lt;div&gt;&lt;/div&gt;\n\n&lt;/body&gt; \n&lt;/html&gt; \n[/code]\n\n\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-18', '', '', '2010-07-10 13:47:34', '2010-07-10 17:47:34', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-18/', 0, 'revision', '', 0),
(1041, 3, '2010-07-10 13:42:11', '2010-07-10 17:42:11', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-14', '', '', '2010-07-10 13:42:11', '2010-07-10 17:42:11', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-14/', 0, 'revision', '', 0),
(1042, 3, '2010-07-10 13:42:17', '2010-07-10 17:42:17', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-15', '', '', '2010-07-10 13:42:17', '2010-07-10 17:42:17', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-15/', 0, 'revision', '', 0),
(1043, 3, '2010-07-10 13:42:53', '2010-07-10 17:42:53', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-16', '', '', '2010-07-10 13:42:53', '2010-07-10 17:42:53', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-16/', 0, 'revision', '', 0),
(1044, 3, '2010-07-10 13:42:58', '2010-07-10 17:42:58', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-17', '', '', '2010-07-10 13:42:58', '2010-07-10 17:42:58', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-17/', 0, 'revision', '', 0),
(1045, 3, '2010-07-10 13:42:58', '2010-07-10 17:42:58', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being development by the Microsoft Ajax Core team. Because I was going to be giving a presentation on the topic soon, I didn''t want to post about all of the features immediately, to be fair to the people who paid to hear the presentation.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-17', '', '', '2010-07-10 13:42:58', '2010-07-10 17:42:58', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-17/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1047, 3, '2010-07-10 13:47:44', '2010-07-10 17:47:44', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-19', '', '', '2010-07-10 13:47:44', '2010-07-10 17:47:44', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-19/', 0, 'revision', '', 0),
(1048, 3, '2010-07-10 13:47:51', '2010-07-10 17:47:51', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "$data" is an object containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-20', '', '', '2010-07-10 13:47:51', '2010-07-10 17:47:51', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-20/', 0, 'revision', '', 0),
(1049, 3, '2010-07-10 13:53:12', '2010-07-10 17:53:12', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" is an array containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-21', '', '', '2010-07-10 13:53:12', '2010-07-10 17:53:12', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-21/', 0, 'revision', '', 0),
(1050, 3, '2010-07-10 13:54:13', '2010-07-10 17:54:13', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" is an array containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-22', '', '', '2010-07-10 13:54:13', '2010-07-10 17:54:13', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-22/', 0, 'revision', '', 0),
(1051, 3, '2010-07-10 13:54:18', '2010-07-10 17:54:18', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" is an array containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-23', '', '', '2010-07-10 13:54:18', '2010-07-10 17:54:18', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-23/', 0, 'revision', '', 0),
(1052, 3, '2010-07-10 13:56:19', '2010-07-10 17:56:19', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" is an array containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-24', '', '', '2010-07-10 13:56:19', '2010-07-10 17:56:19', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-24/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1085, 3, '2010-07-20 15:37:43', '2010-07-20 19:37:43', 'Over the years, I''ve read or been recommended a number of books which are essential reading for professional web developers. I''ve compiled the list of books below to help the community find a comprehensive list of good books that can help them be better coders. \r\n\r\n<h3>JavaScript</h3>\r\n\r\n<a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047022780X">Professional JavaScript for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047022780X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - My new favorite book. Almost 1,000 pages of VERY detailed JavaScript information. Written by Nicholas Zakas, Yahoo! Principal Front-end Engineer for Yahoo!''s home page and recommended by the YUI team as well. BUY THIS BOOK!\r\n\r\n<a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596101996" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Considered the Bible of JavaScript for its thorough coverage of JavaScript. You need to have this in your library, even as a reference.\r\n\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - This is a good book to get you familiar with the DOM. \r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> \r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - The book by Christian Heilmann that really got me past the initial hump of plain ''ole JavaScript. His writing style is awesome.\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - JUST BUY THIS BOOK! Stoyan did a great job of outlining OOJS principles and it''s been incredibly valuable.\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - It''s certainly a good book and I would recommend reading it after one of the more intro books like JS for Web Developer by Nicholas Zakas.\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - While covering jQuery v1.3, the techniques discussed are still useful and I still recommend the book highly.\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - John Resig''s famous book on advanced JS techniques.\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Still not out but considering that John Resig is that author, it''s sure to be great.\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - One of the first books I picked up and great overview of the language.\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Billy Hoffman is the man when it comes to Ajax security and this books shows why.\r\n\r\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Tips & techniques from the jQuery team rolled up in a cookbook style. You can''t go wrong.\r\n\r\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - This is now updated for jQuery v1.4.x as well as jQuery UI 1.8.x. Definitely a must-have for jQuery developers\r\n\r\n<a href="http://jqueryenlightenment.com/">jQuery Enlightenment</a> - Cody Lindley did an amazing job in outlining the best jQuery techniques in this self-published book. Totally worth the price.\r\n\r\n<a href="http://my.safaribooksonline.com/9780321684097">Test-Driven JavaScript Development</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/0980576857?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0980576857">jQuery: Novice to Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0980576857" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<h3>HTML & CSS</h3>\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> \r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a> - This is one of Sitepoint''s best CSS books. Loved it.\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a> - Not being a designer, I thought this book was a tremendous help in understanding how to better design sites.\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - This has been my goto book for some time. The Head First books are just so great at breaking down topics in easy to understand ways and this book is no exception.\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Going to get this soon mainly because it''s written by Remy Sharp and Bruce Lawson whom I respect tremendously, especially for their HTML5 & CSS3 savvy.\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>  - Just got this on 7/19/10. Need to read it by it''s by Jeremy Keith and he rocks.\r\n\r\n<a href="http://www.amazon.com/gp/product/059615593X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059615593X">CSS Cookbook, 3rd Edition (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059615593X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Just picked this up on a recommendation.\r\n\r\n<a href="http://www.amazon.com/gp/product/0596802447?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596802447">CSS: The Missing Manual</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596802447" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - I keep hearing rave reviews about this book all over the place.\r\n\r\n<h3>Site Performance & Enhancement</h3>\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Steve Souders is the performance guru and if you want your apps to perform better, get this book and the one right below this one.\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059680279X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Again, another great book by Nicholas Zakas which outlines very important performance techniques for JavaScript applications. \r\n\r\n<a href="http://www.amazon.com/gp/product/0321658884?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321658884">Designing with Progressive Enhancement: Building the Web that Works for Everyone</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321658884" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> - Great book on progressive enhancement by the superstars at the Filament Group.\r\n\r\nThis is certainly not all inclusive and I''m sure there are other books out there that have been great. If you feel very passionate about a specific title, let me know via the comments and I''ll check it out.', 'The Essential List of JavaScript, jQuery, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'publish', 'open', 'open', '', 'the-essential-list-of-javascript-jquery-html-css-books-to-make-you-a-better-web-developer', '', '', '2010-07-21 09:02:24', '2010-07-21 13:02:24', '', 0, 'http://blog.reybango.com/?p=1085', 0, 'post', '', 16),
(1054, 3, '2010-07-10 13:56:41', '2010-07-10 17:56:41', '<a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">In my last post</a>, I presented an intro to how to create a template using the new <a href="http://github.com/nje/jquery-tmpl">jQuery Template plugin</a> being developed by the Microsoft Ajax Core team. In this tutorial, I''ll show you how to nest templates to have great control over your layout.\r\n\r\nThe nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let''s start by defining some data:\r\n\r\n[code language="js"]\r\n       var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n        ];\r\n[/code]\r\n\r\nWhat I''d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.\r\n\r\nLike I showed in my previous post, we first create a template for our layout:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client"\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nLastly, we''re going to include the call to "<em>phoneTemplate</em>" in our main template using the <em>"tmpl"</em> tag. This tag is used by the plugin to identify templates and parse them accordingly. Here''s what the call would look like:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nand we''re going to include it into the main template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nThis will generate the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/nested.png" alt="" title="nested" width="235" height="342" class="alignleft size-full wp-image-1035" /></a>\r\n\r\nThere are a couple of key things to understand here. First, let''s look at the following:\r\n\r\n[code language="js"]\r\n{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n[/code]\r\n\r\nThe variable "<em>$data</em>" is an array containing the data for the current record being parsed. We''re passing it to the nested template so that we can work with that record. Let''s move onto the nested template:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nNow that the current record has been passed to it, we can access the attribute name, in this case "phone", and loop through each phone record using the ''<em>{{each}}</em>'' plugin template tag. Think of it as similar to jQuery''s $.each() method or a JavaScript "for" loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.\r\n\r\nHere''s the whole code for you to work with:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt; \r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; \r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt; \r\n  &lt;title&gt;Template Test&lt;/title&gt; \r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  \r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n\r\n        var clientData = [\r\n	        { name: &quot;Rey Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n	        { name: &quot;Mark Goldberg&quot;, age: 51, id: 2, phone: [&quot;617-777-1234&quot;, &quot;617-222-3333&quot;] },\r\n	        { name: &quot;Jen Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;608-555-5647&quot;, &quot;608-645-8855&quot;] }\r\n        ];\r\n\r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n\r\n});\r\n  &lt;/script&gt;\r\n\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;p&gt;&lt;a href=&quot;clients/${id}&quot;&gt;${name} - Age: ${age}&lt;/a&gt;&lt;/p&gt;\r\n	{{tmpl($data) &quot;#phoneTemplate&quot;}}\r\n&lt;/script&gt;\r\n\r\n&lt;script id=&quot;phoneTemplate&quot; type=&quot;text/html&quot;&gt;\r\n	&lt;ul&gt;{{each phone}}&lt;li&gt;${$value}&lt;/li&gt;{{/each}}&lt;/ul&gt;\r\n&lt;/script&gt;\r\n  \r\n&lt;/head&gt; \r\n \r\n&lt;body&gt; \r\n\r\n&lt;div&gt;&lt;/div&gt;\r\n\r\n&lt;/body&gt; \r\n&lt;/html&gt; \r\n[/code]\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Nesting Templates', 0, '', 'inherit', 'open', 'open', '', '1026-revision-25', '', '', '2010-07-10 13:56:41', '2010-07-10 17:56:41', '', 1026, 'http://blog.reybango.com/2010/07/10/1026-revision-25/', 0, 'revision', '', 0),
(1055, 3, '2010-07-12 14:42:53', '2010-07-12 18:42:53', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nThe big takeaways:\r\n\r\n<ul>\r\n	<li>Online conferences rock! No travel == less expenses.</li>\r\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\r\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\r\n</ul>\r\n\r\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\r\n\r\nI want to thank everyone for attending and for the kind words. I really appreciate it. I also want to thank <a href="http://carsonified.com/">Carsonified</a> for giving me the opportunity to speak at a great event. ', 'The Source Code for my Twitter Demo from the Think Vitamin jQuery Online Conference Templating Presentation', 0, '', 'publish', 'open', 'open', '', 'the-source-code-for-my-twitter-demo-from-the-think-vitamin-jquery-online-conference-templating-presentation', '', '', '2010-07-12 14:42:53', '2010-07-12 18:42:53', '', 0, 'http://blog.reybango.com/?p=1055', 0, 'post', '', 1),
(1056, 3, '2010-07-12 14:33:27', '2010-07-12 18:33:27', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\n\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\n\nDownl', 'My jQuery Templating Presentation Code', 0, '', 'inherit', 'open', 'open', '', '1055-revision', '', '', '2010-07-12 14:33:27', '2010-07-12 18:33:27', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision/', 0, 'revision', '', 0),
(1057, 3, '2010-07-12 14:33:44', '2010-07-12 18:33:44', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>', 'My jQuery Templating Presentation Code', 0, '', 'inherit', 'open', 'open', '', '1055-revision-2', '', '', '2010-07-12 14:33:44', '2010-07-12 18:33:44', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-2/', 0, 'revision', '', 0),
(1058, 3, '2010-07-12 14:33:49', '2010-07-12 18:33:49', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>', 'My jQuery Templating Presentation Code', 0, '', 'inherit', 'open', 'open', '', '1055-revision-3', '', '', '2010-07-12 14:33:49', '2010-07-12 18:33:49', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-3/', 0, 'revision', '', 0),
(1059, 3, '2010-07-12 14:39:01', '2010-07-12 18:39:01', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\n\nThe big takeaways:\n\n<ul>\n	<li>Online conferences rock! No travel == less expenses.</li>\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\n</ul>\n\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to \n\n\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\n\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\n\nI want to thank everyone for attending and for the kind words. I really appreciate. I also want to thank Carsonified for giving me the opportunity to speak at a great event. ', 'My jQuery Templating Presentation Code', 0, '', 'inherit', 'open', 'open', '', '1055-revision-4', '', '', '2010-07-12 14:39:01', '2010-07-12 18:39:01', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-4/', 0, 'revision', '', 0),
(1060, 3, '2010-07-12 14:40:02', '2010-07-12 18:40:02', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\n\nThe big takeaways:\n\n<ul>\n	<li>Online conferences rock! No travel == less expenses.</li>\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\n</ul>\n\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\n\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\n\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\n\nI want to thank everyone for attending and for the kind words. I really appreciate. I also want to thank Carsonified for giving me the opportunity to speak at a great event. ', 'My jQuery Templating Presentation Code', 0, '', 'inherit', 'open', 'open', '', '1055-revision-5', '', '', '2010-07-12 14:40:02', '2010-07-12 18:40:02', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-5/', 0, 'revision', '', 0),
(1061, 3, '2010-07-12 14:40:38', '2010-07-12 18:40:38', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nThe big takeaways:\r\n\r\n<ul>\r\n	<li>Online conferences rock! No travel == less expenses.</li>\r\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\r\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\r\n</ul>\r\n\r\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\r\n\r\nI want to thank everyone for attending and for the kind words. I really appreciate. I also want to thank Carsonified for giving me the opportunity to speak at a great event. ', 'The Source Code for my Twitter Demo from the Think Vitamin jQuery Online Conference Templating Presentation', 0, '', 'inherit', 'open', 'open', '', '1055-revision-6', '', '', '2010-07-12 14:40:38', '2010-07-12 18:40:38', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-6/', 0, 'revision', '', 0),
(1062, 3, '2010-07-12 14:40:43', '2010-07-12 18:40:43', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nThe big takeaways:\r\n\r\n<ul>\r\n	<li>Online conferences rock! No travel == less expenses.</li>\r\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\r\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\r\n</ul>\r\n\r\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\r\n\r\nI want to thank everyone for attending and for the kind words. I really appreciate. I also want to thank Carsonified for giving me the opportunity to speak at a great event. ', 'The Source Code for my Twitter Demo from the Think Vitamin jQuery Online Conference Templating Presentation', 0, '', 'inherit', 'open', 'open', '', '1055-revision-7', '', '', '2010-07-12 14:40:43', '2010-07-12 18:40:43', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-7/', 0, 'revision', '', 0),
(1063, 3, '2010-07-12 14:42:32', '2010-07-12 18:42:32', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nThe big takeaways:\r\n\r\n<ul>\r\n	<li>Online conferences rock! No travel == less expenses.</li>\r\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\r\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\r\n</ul>\r\n\r\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\r\n\r\nI want to thank everyone for attending and for the kind words. I really appreciate it. I also want to thank <a href="http://carsonified.com/">Carsonified</a> for giving me the opportunity to speak at a great event. ', 'The Source Code for my Twitter Demo from the Think Vitamin jQuery Online Conference Templating Presentation', 0, '', 'inherit', 'open', 'open', '', '1055-revision-8', '', '', '2010-07-12 14:42:32', '2010-07-12 18:42:32', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-8/', 0, 'revision', '', 0),
(1064, 3, '2010-07-12 14:42:38', '2010-07-12 18:42:38', 'I just finished my presentation at <a href="http://carsonified.com/online-conferences/jquery/">Think Vitamin’s jQuery Online Conference</a> and it was such a great experience. This is the first BIG virtual conference I''ve presented at and it ran smooth as silk. I really have to hand it to the Carsonified team; they have their act together. :)\r\n\r\nThe big takeaways:\r\n\r\n<ul>\r\n	<li>Online conferences rock! No travel == less expenses.</li>\r\n	<li>The technology is good enough to be able to do this and WebEx is awesome.</li>\r\n	<li>Carsonified''s got this down. While some tech problems are expected, they''ve really got the process working well.</li>\r\n</ul>\r\n\r\nThe only downside, from a speaker perspective, is that you really can''t see how your audience is reacting. That''s tough because sometimes, you''re able to adjust according to your audience''s feedback. If there''s dead silence, you know you need to bring them back. If they''re engaged, you know you''re on track. In a virtual conference, you can''t gauge that so it''s tough.\r\n\r\nLots of folks have asked for the code for the Twitter demo that I did. You can now download that below:\r\n\r\n<a href="http://reybango.com/twitter/twitter.zip">Download the Twitter Demo Source</a>\r\n\r\nI want to thank everyone for attending and for the kind words. I really appreciate it. I also want to thank <a href="http://carsonified.com/">Carsonified</a> for giving me the opportunity to speak at a great event. ', 'The Source Code for my Twitter Demo from the Think Vitamin jQuery Online Conference Templating Presentation', 0, '', 'inherit', 'open', 'open', '', '1055-revision-9', '', '', '2010-07-12 14:42:38', '2010-07-12 18:42:38', '', 1055, 'http://blog.reybango.com/2010/07/12/1055-revision-9/', 0, 'revision', '', 0),
(1065, 3, '2010-07-14 08:14:37', '2010-07-14 12:14:37', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show some text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. The key is the "<em>{{if..else}}</em>" custom tag that''s been incorporated into the template plugin that allows you to specify conditional statements.\r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\nThe thing to stress here is that using inline expressions and code blocks together can give you a tremendous amount of control over how you control you data. You have the flexibility you''d expect by using JavaScript but in a manner that is easily readable and maintainable.\r\n\r\nHere''s the final code:\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'publish', 'open', 'open', '', 'jquery-javascript-templates-tutorial-inline-expressions-and-code-blocks', '', '\nhttp://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/', '2010-07-14 08:14:37', '2010-07-14 12:14:37', '', 0, 'http://blog.reybango.com/?p=1065', 0, 'post', '', 19),
(1066, 3, '2010-07-14 07:39:16', '2010-07-14 11:39:16', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\n\n<h2>Inline Expressions</h2>\n\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\n\n[code language="js"][/code]\nvar clientData = [\n     { first: "Rey", last: "Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },\n     { first: "Mark", last: "Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },\n     { first: "Jen", last: "Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }\n ];\n\nWhat I did was break out the "name" attribute into "first" and "last"\n\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision', '', '', '2010-07-14 07:39:16', '2010-07-14 11:39:16', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision/', 0, 'revision', '', 0),
(1067, 3, '2010-07-14 07:44:57', '2010-07-14 11:44:57', '', 'inline', 0, '', 'inherit', 'open', 'open', '', 'inline', '', '', '2010-07-14 07:44:57', '2010-07-14 11:44:57', '', 1065, 'http://blog.reybango.com/wp-content/uploads/2010/07/inline.png', 0, 'attachment', 'image/png', 0),
(1068, 3, '2010-07-14 07:45:45', '2010-07-14 11:45:45', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\n\n<h2>Inline Expressions</h2>\n\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\n\n[code language="js"][/code][/code]\nvar clientData = [\n     { first: "Rey", last: "Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },\n     { first: "Mark", last: "Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },\n     { first: "Jen", last: "Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }\n ];\n\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\n\n[code language="js"][/code][/code]\n<li>${ last + " " + first }</li> \n[/code]\n\nWhich gives me the following result:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\n\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should \n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-2', '', '', '2010-07-14 07:45:45', '2010-07-14 11:45:45', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-2/', 0, 'revision', '', 0),
(1069, 3, '2010-07-14 07:46:08', '2010-07-14 11:46:08', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"][/code][/code]\r\nvar clientData = [\r\n     { first: "Rey", last: "Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },\r\n     { first: "Mark", last: "Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },\r\n     { first: "Jen", last: "Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }\r\n ];\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"][/code][/code]\r\n<li>${ last + " " + first }</li> \r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-3', '', '', '2010-07-14 07:46:08', '2010-07-14 11:46:08', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-3/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1070, 3, '2010-07-14 07:46:13', '2010-07-14 11:46:13', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"][/code][/code]\r\nvar clientData = [\r\n     { first: "Rey", last: "Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },\r\n     { first: "Mark", last: "Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },\r\n     { first: "Jen", last: "Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }\r\n ];\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"][/code][/code]\r\n<li>${ last + " " + first }</li> \r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-4', '', '', '2010-07-14 07:46:13', '2010-07-14 11:46:13', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-4/', 0, 'revision', '', 0),
(1073, 3, '2010-07-14 07:47:18', '2010-07-14 11:47:18', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-7', '', '', '2010-07-14 07:47:18', '2010-07-14 11:47:18', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-7/', 0, 'revision', '', 0),
(1071, 3, '2010-07-14 07:46:53', '2010-07-14 11:46:53', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n\r\nWhat I did was break out the &lt;em&gt;&quot;name&quot;&lt;/em&gt; attribute into &lt;em&gt;&quot;first&quot;&lt;/em&gt; and &lt;em&gt;&quot;last&quot;&lt;/em&gt; name fields. Now, say I wanted to render the full name in my template. I would use the following &lt;strong&gt;inline expression&lt;/strong&gt; to do so:\r\n\r\n[code language=&quot;js&quot;]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-5', '', '', '2010-07-14 07:46:53', '2010-07-14 11:46:53', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-5/', 0, 'revision', '', 0),
(1072, 3, '2010-07-14 07:46:56', '2010-07-14 11:46:56', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n\r\nWhat I did was break out the &lt;em&gt;&quot;name&quot;&lt;/em&gt; attribute into &lt;em&gt;&quot;first&quot;&lt;/em&gt; and &lt;em&gt;&quot;last&quot;&lt;/em&gt; name fields. Now, say I wanted to render the full name in my template. I would use the following &lt;strong&gt;inline expression&lt;/strong&gt; to do so:\r\n\r\n[code language=&quot;js&quot;]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-6', '', '', '2010-07-14 07:46:56', '2010-07-14 11:46:56', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-6/', 0, 'revision', '', 0),
(1074, 3, '2010-07-14 07:57:47', '2010-07-14 11:57:47', '', 'codeblock', 0, '', 'inherit', 'open', 'open', '', 'codeblock', '', '', '2010-07-14 07:57:47', '2010-07-14 11:57:47', '', 1065, 'http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png', 0, 'attachment', 'image/png', 0),
(1075, 3, '2010-07-14 07:47:23', '2010-07-14 11:47:23', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-8', '', '', '2010-07-14 07:47:23', '2010-07-14 11:47:23', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-8/', 0, 'revision', '', 0),
(1076, 3, '2010-07-14 08:03:53', '2010-07-14 12:03:53', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-9', '', '', '2010-07-14 08:03:53', '2010-07-14 12:03:53', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-9/', 0, 'revision', '', 0),
(1077, 3, '2010-07-14 08:04:20', '2010-07-14 12:04:20', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-10', '', '', '2010-07-14 08:04:20', '2010-07-14 12:04:20', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-10/', 0, 'revision', '', 0),
(1078, 3, '2010-07-14 08:06:22', '2010-07-14 12:06:22', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. Now, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-11', '', '', '2010-07-14 08:06:22', '2010-07-14 12:06:22', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-11/', 0, 'revision', '', 0),
(1079, 3, '2010-07-14 08:06:54', '2010-07-14 12:06:54', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-12', '', '', '2010-07-14 08:06:54', '2010-07-14 12:06:54', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-12/', 0, 'revision', '', 0),
(1080, 3, '2010-07-14 08:07:13', '2010-07-14 12:07:13', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-13', '', '', '2010-07-14 08:07:13', '2010-07-14 12:07:13', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-13/', 0, 'revision', '', 0),
(1081, 3, '2010-07-14 08:07:17', '2010-07-14 12:07:17', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show so text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. Considering that I''m 42, I''m definitely in the <em>"veteran code"</em> section. ;) \r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\n\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-14', '', '', '2010-07-14 08:07:17', '2010-07-14 12:07:17', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-14/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1082, 3, '2010-07-14 08:13:07', '2010-07-14 12:13:07', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show some text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. The key is the "<em>{{if..else}}</em>" custom tag that''s been incorporated into the template plugin that allows you to specify conditional statements.\r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\nThe thing to stress here is that using inline expressions and code blocks together can give you a tremendous amount of control over how you control you data. You have the flexibility you''d expect by using JavaScript but in a manner that is easily readable and maintainable.\r\n\r\nHere''s the final code:\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-15', '', '', '2010-07-14 08:13:07', '2010-07-14 12:13:07', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-15/', 0, 'revision', '', 0),
(1083, 3, '2010-07-14 08:13:11', '2010-07-14 12:13:11', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show some text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. The key is the "<em>{{if..else}}</em>" custom tag that''s been incorporated into the template plugin that allows you to specify conditional statements.\r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\nThe thing to stress here is that using inline expressions and code blocks together can give you a tremendous amount of control over how you control you data. You have the flexibility you''d expect by using JavaScript but in a manner that is easily readable and maintainable.\r\n\r\nHere''s the final code:\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-16', '', '', '2010-07-14 08:13:11', '2010-07-14 12:13:11', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-16/', 0, 'revision', '', 0),
(1084, 3, '2010-07-14 08:13:59', '2010-07-14 12:13:59', 'So far in my series on jQuery JavaScript Templating, I''ve showed how to <a href="http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/">create a basic jQuery JavaScript template</a> and then <a href="http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/">nest templates</a> for increased layout flexibility and maintainability. If you haven''t read those two posts, I highly recommend you do so you can understand the concepts below.\r\n\r\nNow, let''s dive into two other techniques available in the <a href="http://github.com/nje/jquery-tmpl">Microsoft jQuery Templates plugin</a>; inline expressions and code blocks.\r\n\r\n<h2>Inline Expressions</h2>\r\n\r\nBeing able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that''s being rendered, you''d probably find templates a lot less useful. That''s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here''s the data:\r\n\r\n[code language="js"]\r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n[/code]\r\n\r\nWhat I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nWhich gives me the following result:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>\r\n\r\nNotice that I''m using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.\r\n\r\n<h2>Code Blocks</h2>\r\n\r\nNow, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let''s say that based on the age of a client, I want to show some text next to their name. I''ll use the following code block:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}\r\n[/code]\r\n\r\nThis code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person''s age. The key is the "<em>{{if..else}}</em>" custom tag that''s been incorporated into the template plugin that allows you to specify conditional statements.\r\n\r\nHere''s what the template would look like:\r\n\r\n[code language="js"]\r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n[/code]\r\n\r\nwhich generates the following results:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>\r\n\r\nAnd again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this as well:\r\n\r\n[code language="js"]\r\n{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}\r\n[/code]\r\n\r\nThe thing to stress here is that using inline expressions and code blocks together can give you a tremendous amount of control over how you control you data. You have the flexibility you''d expect by using JavaScript but in a manner that is easily readable and maintainable.\r\n\r\nHere''s the final code:\r\n\r\n[code language="js"]\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;\r\n  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;\r\n  &lt;title&gt;Template Test&lt;/title&gt;\r\n  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n  &lt;script type=&quot;text/javascript&quot;&gt;\r\n  $(document).ready(function() {\r\n \r\nvar clientData = [\r\n     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },\r\n     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },\r\n     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }\r\n ];\r\n \r\n        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);\r\n \r\n});\r\n  &lt;/script&gt;\r\n \r\n&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;\r\n    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;\r\n&lt;/script&gt;\r\n \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n \r\n&lt;div&gt;&lt;/div&gt;\r\n \r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n[/code]', 'jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks', 0, '', 'inherit', 'open', 'open', '', '1065-revision-17', '', '', '2010-07-14 08:13:59', '2010-07-14 12:13:59', '', 1065, 'http://blog.reybango.com/2010/07/14/1065-revision-17/', 0, 'revision', '', 0),
(1086, 3, '2010-07-20 14:58:27', '2010-07-20 18:58:27', 'JavaScript:\nhttp://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1590595335/ref=sr_1_1?ie=UTF8&s=books&qid=1269969320&sr=1-1\nhttp://www.amazon.com/AdvancED-DOM-Scripting-Dynamic-Techniques/dp/1590598563/ref=sr_1_4?ie=UTF8&s=books&qid=1269970298&sr=1-4\nhttp://www.amazon.com/Beginning-JavaScript-DOM-Scripting-Ajax/dp/1590596803/ref=sr_1_2?ie=UTF8&s=books&qid=1269969360&sr=1-2\nhttp://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_1?ie=UTF8&s=books&qid=1269969380&sr=1-1\nhttp://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141/ref=pd_sim_b_1\nhttp://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=pd_bxgy_b_img_b\nhttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=pd_sim_b_6\nhttp://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_sim_b_1\nhttp://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705/ref=sr_1_4?ie=UTF8&s=books&qid=1269969466&sr=1-4\nhttp://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=pd_sim_b_7\nhttp://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/ref=pd_sim_b_4\nhttp://www.amazon.com/Ajax-Security-Billy-Hoffman/dp/0321491939/ref=sr_1_1?ie=UTF8&s=books&qid=1269969831&sr=1-1\nhttp://www.amazon.com/ppk-JavaScript-1-Peter-Paul-Koch/dp/0321423305/ref=sr_1_1?ie=UTF8&s=books&qid=1269969861&sr=1-1\nhttp://www.amazon.com/Accelerated-Scripting-Ajax-APIs-Libraries/dp/1590597648/ref=sr_1_8?ie=UTF8&s=books&qid=1269970241&sr=1-8\n\nHTML & CSS:\nhttp://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040/ref=sr_1_8?ie=UTF8&s=books&qid=1269969554&sr=1-8\nhttp://www.amazon.com/Web-Standards-Solutions-Handbook-Special/dp/1430219203/ref=pd_sim_b_7\nhttp://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_bxgy_b_img_c\nhttp://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a\nhttp://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a\nhttp://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_5?ie=UTF8&s=books&qid=1269969937&sr=1-5\nhttp://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/1600330045/ref=sr_1_6?ie=UTF8&s=books&qid=1269969937&sr=1-6\n\n', 'The Big List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision', '', '', '2010-07-20 14:58:27', '2010-07-20 18:58:27', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision/', 0, 'revision', '', 0),
(1087, 3, '2010-07-20 14:59:41', '2010-07-20 18:59:41', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n\r\nhttp://www.amazon.com/AdvancED-DOM-Scripting-Dynamic-Techniques/dp/1590598563/ref=sr_1_4?ie=UTF8&s=books&qid=1269970298&sr=1-4\r\nhttp://www.amazon.com/Beginning-JavaScript-DOM-Scripting-Ajax/dp/1590596803/ref=sr_1_2?ie=UTF8&s=books&qid=1269969360&sr=1-2\r\nhttp://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_1?ie=UTF8&s=books&qid=1269969380&sr=1-1\r\nhttp://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141/ref=pd_sim_b_1\r\nhttp://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=pd_bxgy_b_img_b\r\nhttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=pd_sim_b_6\r\nhttp://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_sim_b_1\r\nhttp://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705/ref=sr_1_4?ie=UTF8&s=books&qid=1269969466&sr=1-4\r\nhttp://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=pd_sim_b_7\r\nhttp://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/ref=pd_sim_b_4\r\nhttp://www.amazon.com/Ajax-Security-Billy-Hoffman/dp/0321491939/ref=sr_1_1?ie=UTF8&s=books&qid=1269969831&sr=1-1\r\nhttp://www.amazon.com/ppk-JavaScript-1-Peter-Paul-Koch/dp/0321423305/ref=sr_1_1?ie=UTF8&s=books&qid=1269969861&sr=1-1\r\nhttp://www.amazon.com/Accelerated-Scripting-Ajax-APIs-Libraries/dp/1590597648/ref=sr_1_8?ie=UTF8&s=books&qid=1269970241&sr=1-8\r\n\r\nHTML & CSS:\r\nhttp://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040/ref=sr_1_8?ie=UTF8&s=books&qid=1269969554&sr=1-8\r\nhttp://www.amazon.com/Web-Standards-Solutions-Handbook-Special/dp/1430219203/ref=pd_sim_b_7\r\nhttp://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_bxgy_b_img_c\r\nhttp://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a\r\nhttp://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a\r\nhttp://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_5?ie=UTF8&s=books&qid=1269969937&sr=1-5\r\nhttp://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/1600330045/ref=sr_1_6?ie=UTF8&s=books&qid=1269969937&sr=1-6\r\n\r\n', 'The Big List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-2', '', '', '2010-07-20 14:59:41', '2010-07-20 18:59:41', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-2/', 0, 'revision', '', 0),
(1088, 3, '2010-07-20 14:59:46', '2010-07-20 18:59:46', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n\r\nhttp://www.amazon.com/AdvancED-DOM-Scripting-Dynamic-Techniques/dp/1590598563/ref=sr_1_4?ie=UTF8&s=books&qid=1269970298&sr=1-4\r\nhttp://www.amazon.com/Beginning-JavaScript-DOM-Scripting-Ajax/dp/1590596803/ref=sr_1_2?ie=UTF8&s=books&qid=1269969360&sr=1-2\r\nhttp://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_1?ie=UTF8&s=books&qid=1269969380&sr=1-1\r\nhttp://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141/ref=pd_sim_b_1\r\nhttp://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=pd_bxgy_b_img_b\r\nhttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=pd_sim_b_6\r\nhttp://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=pd_sim_b_1\r\nhttp://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705/ref=sr_1_4?ie=UTF8&s=books&qid=1269969466&sr=1-4\r\nhttp://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=pd_sim_b_7\r\nhttp://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/ref=pd_sim_b_4\r\nhttp://www.amazon.com/Ajax-Security-Billy-Hoffman/dp/0321491939/ref=sr_1_1?ie=UTF8&s=books&qid=1269969831&sr=1-1\r\nhttp://www.amazon.com/ppk-JavaScript-1-Peter-Paul-Koch/dp/0321423305/ref=sr_1_1?ie=UTF8&s=books&qid=1269969861&sr=1-1\r\nhttp://www.amazon.com/Accelerated-Scripting-Ajax-APIs-Libraries/dp/1590597648/ref=sr_1_8?ie=UTF8&s=books&qid=1269970241&sr=1-8\r\n\r\nHTML & CSS:\r\nhttp://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040/ref=sr_1_8?ie=UTF8&s=books&qid=1269969554&sr=1-8\r\nhttp://www.amazon.com/Web-Standards-Solutions-Handbook-Special/dp/1430219203/ref=pd_sim_b_7\r\nhttp://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_bxgy_b_img_c\r\nhttp://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a\r\nhttp://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a\r\nhttp://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_5?ie=UTF8&s=books&qid=1269969937&sr=1-5\r\nhttp://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/1600330045/ref=sr_1_6?ie=UTF8&s=books&qid=1269969937&sr=1-6\r\n\r\n', 'The Big List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-3', '', '', '2010-07-20 14:59:46', '2010-07-20 18:59:46', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-3/', 0, 'revision', '', 0),
(1089, 3, '2010-07-20 15:07:53', '2010-07-20 19:07:53', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\nHTML & CSS:\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n', 'The Big List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-4', '', '', '2010-07-20 15:07:53', '2010-07-20 19:07:53', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-4/', 0, 'revision', '', 0),
(1090, 3, '2010-07-20 15:08:04', '2010-07-20 19:08:04', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\nHTML & CSS:\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-5', '', '', '2010-07-20 15:08:04', '2010-07-20 19:08:04', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-5/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1091, 3, '2010-07-20 15:09:00', '2010-07-20 19:09:00', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\nHTML & CSS:\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-6', '', '', '2010-07-20 15:09:00', '2010-07-20 19:09:00', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-6/', 0, 'revision', '', 0),
(1092, 3, '2010-07-20 15:09:10', '2010-07-20 19:09:10', 'JavaScript:\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\nHTML & CSS:\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-7', '', '', '2010-07-20 15:09:10', '2010-07-20 19:09:10', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-7/', 0, 'revision', '', 0),
(1093, 3, '2010-07-20 15:14:02', '2010-07-20 19:14:02', '<h2>JavaScript</h2>\n\n<a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047022780X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596101996" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://jqueryenlightenment.com/">jQuery Enlightenment</a> \n\n<h2>HTML & CSS</h2>\n\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\n\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\n\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\n\n<h2>Site Performance</h2>\n\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n\n<a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059680279X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-8', '', '', '2010-07-20 15:14:02', '2010-07-20 19:14:02', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-8/', 0, 'revision', '', 0),
(1094, 3, '2010-07-20 15:14:17', '2010-07-20 19:14:17', '<h2>JavaScript</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047022780X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596101996" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://jqueryenlightenment.com/">jQuery Enlightenment</a> \r\n\r\n<h2>HTML & CSS</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n<h2>Site Performance</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059680279X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-9', '', '', '2010-07-20 15:14:17', '2010-07-20 19:14:17', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-9/', 0, 'revision', '', 0),
(1095, 3, '2010-07-20 15:14:25', '2010-07-20 19:14:25', '<h2>JavaScript</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047022780X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596101996" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n\r\n<a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://jqueryenlightenment.com/">jQuery Enlightenment</a> \r\n\r\n<h2>HTML & CSS</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS, 2nd Edition</a>\r\n\r\n<a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0321687299?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321687299">Introducing HTML5 (Voices That Matter)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321687299" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://books.alistapart.com/product/html5-for-web-designers">HTML5 For Web Designers</a>\r\n\r\n<h2>Site Performance</h2>\r\n\r\n<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n\r\n<a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059680279X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n', 'The Essential List of JavaScript, HTML & CSS Books to Make You a Better Web Developer', 0, '', 'inherit', 'open', 'open', '', '1085-revision-10', '', '', '2010-07-20 15:14:25', '2010-07-20 19:14:25', '', 1085, 'http://blog.reybango.com/2010/07/20/1085-revision-10/', 0, 'revision', '', 0);
