tag:blogger.com,1999:blog-3627888979577168137.post2182287749356001745..comments2023-03-26T00:54:12.803-07:00Comments on Dancing with Data: Introducing jQuery Templates 1: First StepsBoris Moorehttp://www.blogger.com/profile/17923416771395046921noreply@blogger.comBlogger35125tag:blogger.com,1999:blog-3627888979577168137.post-14531433113696319792016-10-03T14:40:30.692-07:002016-10-03T14:40:30.692-07:00This is an example of how jQuery Templates are les...This is an example of how jQuery Templates are less complete and powerful as a template engine than JsRender. You can access $index from within {{each}}, but not from an array which you pass in to tmpl(). In JsRender you have <a href="http://www.jsviews.com/#getindex" rel="nofollow">getIndex()</a> - which works for both scenarios. I would encourage you to switch to JsRender. Also jQuery Templates are no longer supported so I will be unlikely to be able to reply to specific questions of this kind, moving forward...Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-23820045484606382162016-08-15T22:52:12.255-07:002016-08-15T22:52:12.255-07:00Hi can you tell me how can i get the index of json...Hi can you tell me how can i get the index of json list each array objectAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-40371006234441704852016-01-22T12:17:18.618-08:002016-01-22T12:17:18.618-08:00Thanks a lot. This is what I was looking for.Thanks a lot. This is what I was looking for.Sumit Bharatihttps://www.blogger.com/profile/02794507237041100683noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-44414356979797930992013-05-20T08:34:37.028-07:002013-05-20T08:34:37.028-07:00Thank you very much. Tried to find an easy post to...Thank you very much. Tried to find an easy post to start with jquery templates. Very useful, thanksAnonymoushttps://www.blogger.com/profile/12642165749138352803noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-42712898084394702432013-04-05T06:55:31.478-07:002013-04-05T06:55:31.478-07:00Hey thank you for understandable post.
Just {{html...Hey thank you for understandable post.<br />Just {{html Name}} helpt me with my problem!Olgishhttps://www.blogger.com/profile/10672458941878313279noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-19134136521606910682013-03-14T06:23:26.716-07:002013-03-14T06:23:26.716-07:00Thank you very much.Its very useful tutorial.Thank you very much.Its very useful tutorial.hamdiceylanhttps://www.blogger.com/profile/09496066151645284393noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-25065629082160969082012-04-09T04:03:47.380-07:002012-04-09T04:03:47.380-07:00Nice work with the layout of the blog – it is very...Nice work with the layout of the blog – it is very easy on the eyeJohnpaulhttps://www.blogger.com/profile/15115112772337801247noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-21443077927033946772011-12-27T11:39:03.075-08:002011-12-27T11:39:03.075-08:00@Bohemian: For putting tags in comments, you can e...@Bohemian: For putting tags in comments, you can escape the < as &lt; This is controlled by Blogger comments system, not by me :).<br /><br />For your scenario, it works for me:<br /><script id="TestTemplate" type="text/x-jquery-tmpl"><br />{{if items}} <br />{{each items}} <br /><tr><br /><td>${$value.ID}</td><br /><td>${$value.Question}</td><br /></tr><br />{{/each}}<br />{{/if}}<br /></script><br /><br />Click for details:<br /><table><tbody id="movieList"></tbody></table><br /><br /><script type="text/javascript"><br />var data = { items: [<br /> { ID: "someid", Question: "a question" }<br />]};<br />$( "#TestTemplate" ).tmpl( data ).appendTo( "#movieList" );<br /></script><br /></body><br /></html>Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-19262200842906566712011-12-21T10:16:40.416-08:002011-12-21T10:16:40.416-08:00first off not allowing tags or some way to render ...first off not allowing tags or some way to render applicable snippets is a PITA...<br /><br />I digress... I seem to have a problem getting html table data to work right...<br /><br />the following works...<br /><br />[Xscript id="TestTemplate" type="text/x-jquery-tmpl"]<br /> {{if items}} <br /> {{each items}} <br /> [li]<br /> ${$value.ID}<br /> ${$value.Question}<br /> [/li]<br /> {{/each}}<br /> {{/if}}<br />[/xscript]<br /><br />As does...<br />[Xscript id="TestTemplate" type="text/x-jquery-tmpl"]<br /> {{if items}} <br /> {{each items}} <br /> ${$value.ID}<br /> ${$value.Question}<br /> {{/each}}<br /> {{/if}}<br />[/script]<br /><br />This does not...<br /><br />[script id="TestTemplate" type="text/x-jquery-tmpl"]<br /> {{if items}} <br /> {{each items}} <br /> [tr]<br /> [td]${$value.ID}[/td]<br /> [td]${$value.Question}[/td]<br /> [/tr]<br /> {{/each}}<br /> {{/if}}<br />[/script]<br /><br />Am I missing something obvious?Bohemianhttps://www.blogger.com/profile/03503268732228204504noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-8704723847892956582011-03-28T16:56:49.824-07:002011-03-28T16:56:49.824-07:00@BuralPupp: Absolutely, you can use jQuery templat...@BuralPupp: Absolutely, you can use jQuery templates to render rows, by choosing the <tbody> tag as container, and using a template whose content is one or more <tr>s. Or you can use templates to render the contents of cells. See examples on <a href="https://github.com/jquery/jquery-tmpl/tree/master/demos" rel="nofollow">https://github.com/jquery/jquery-tmpl/tree/master/demos</a>Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-73733329347826175922011-03-23T17:33:57.477-07:002011-03-23T17:33:57.477-07:00@Joel: It would be better to use {{html replaceNew...@Joel: It would be better to use {{html replaceNewLines(description)}} and define a function replaceNewLines() which does the replacing.<br />Generally it is better to put complex code in script, within functions, rather than inline in the template. If you don't want to define global functions, you can pass functions in on the options too, and then call them in the template as: {{html $item.myFunction(foo)}}Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-11962133776438728092011-03-23T17:18:15.847-07:002011-03-23T17:18:15.847-07:00@techInvestor: Yes you can use {{each}} or else yo...@techInvestor: Yes you can use {{each}} or else you can pass a named template. Passing a string to {{tmpl}}be considered as template content is not supported. You can also create a script block containing your template markup, in the usual way, and pass a selector to the script element: {{tmpl(data) "#myTemplate"}}.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-10899573338606320572011-03-11T03:36:15.145-08:002011-03-11T03:36:15.145-08:00How would I go about using this with tables? Let&#...How would I go about using this with tables? Let's say I want to create a table template and then pass json values into a specific column?Moorde Naarhttps://www.blogger.com/profile/02055166979379077493noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-9144040240751038302011-02-21T14:42:45.071-08:002011-02-21T14:42:45.071-08:00Boris, I need to escape a character in a call to r...Boris, I need to escape a character in a call to replace() like this:<br /><br />{{html Description.replace(/\n/g, "<br />")}}<br /><br />I'm trying to replace all newline characters with line breaks, but it doesn't work. I've tried escaping the backslash with any number of backslashes but still, the replacement does not occur. Do you have any suggestions?<br /><br />ThanksJoelhttps://www.blogger.com/profile/14328742986104533481noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-10793262243263406952011-02-15T12:56:02.464-08:002011-02-15T12:56:02.464-08:00followup, i went with using {{each and embedding m...followup, i went with using {{each and embedding my html in the content section, that worked fine.Unknownhttps://www.blogger.com/profile/05889891530852275261noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-54328982837014433382011-02-15T11:37:15.470-08:002011-02-15T11:37:15.470-08:00Hello Boris, thanks for all your work.
I have a qu...Hello Boris, thanks for all your work.<br />I have a question about nested templates. They work fine if I pass them a named template for example:<br />{{tmpl(RelatedInfo) 'relatedInfo' }}<br /><br />however what if I wanted to pass the template as a string for example:<br />{{tmpl(RelatedInfo) '${RelatedUrl}'}}<br /><br />the console gives:<br />missing ) in parenthetical<br />[Break On This Error] tent))));}_.push('RelatedStories '...}_.push('\' }}');}return _;<br /><br />I can pass that string fine when using $.template(<br /><br />according to the docs, <br />$.template( template ) <br />and <br />{{tmpl( [data], [options] ) template}} <br /><br />I pass the same string in both cases, however the second gets held up by the embedded ${<br />Is there a way around this? I would like to be able to send a raw string with embedded ${dataElm}'s in the nested template.Unknownhttps://www.blogger.com/profile/05889891530852275261noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-91824449663523255562010-11-11T10:55:03.819-08:002010-11-11T10:55:03.819-08:00I like this. I just incorporated it into one of t...I like this. I just incorporated it into one of the web applications I am building at Turner. Thanks!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-40500896745767174802010-11-11T10:49:05.243-08:002010-11-11T10:49:05.243-08:00@Didier: Yes certainly they can be used to create ...@Didier: Yes certainly they can be used to create data-entry forms and grids. You can use templates to do that without using any other plugin. Or you can create your own using templates. There are likely to be some plugins appearing over time such as a gridview plugin, that use templates internally. jQueryUI plans to use jQuery Templates in some future UI plugins... But they are not available yet. (jQuery Templates is still in Beta...).<br /><br />@Mark: Yes the integration between Data Linking and Templates will be key to exactly the scenarios you describe. Right now you can do it as in the example you refer to. But stay tuned for much fuller integration in the future. (Including a {{link}} template tag...)<br /><br />@lapp: You may be interested to know that you can create your own template tags, a bit like in Pure you can provide your own directives. Creating custom template tags is not yet documented as such, but I hope to provide more information and examples in the future. It's up to you whether you include the standard tags in your template - and you can separate code and markup as much as you want. You could also have custom tags themselves be 'owned' by a class...Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-31021929398200389332010-11-05T01:02:18.217-07:002010-11-05T01:02:18.217-07:00Hi,
I have been looking for a js template engine a...Hi,<br />I have been looking for a js template engine and came up with jQuery templates und PURE JS. Actually I prefer the way how PURE works due to the fact that I have a strict seperation between HTML, data and directive (each data is passed through the directive which refers to a class). In my opionion this is more flexible than the mix in jQuery template. <br />The big downside PURE JS is not working beneath IE8 :( <br />Well I also could append each data by itself but I don't think this is very practicable or? <br /><br />FlorianUnknownhttps://www.blogger.com/profile/11148431785485601158noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-14302013941084308632010-10-22T09:19:12.039-07:002010-10-22T09:19:12.039-07:00Ah, I see an example of instantiating and then lin...Ah, I see an example of instantiating and then linking in one of the samples for data linking on github: http://github.com/jquery/jquery-datalink/blob/master/demos/demo-contacts.js<br />That will do, of course. I'll have to dig some more into this, but I suspect you could do this with some code in the template tag that acts on data item that then establishes the link, too.Mark Rubinhttps://www.blogger.com/profile/11608134607290215166noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-4678114930070517162010-10-22T08:50:57.115-07:002010-10-22T08:50:57.115-07:00In an earlier blog post by Scott Guthrie (http://w...In an earlier blog post by Scott Guthrie (http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx) he mentioned support for declarative data linking. Is something like that supported with the now official libraries? Templates and data linking serve two separate purposes, of course, and it would be great to be able to instantiate a template, append the results to an dom node, and then have the object used to instantiate the template be data linked to the resulting node contents: so if I update a property on the object after the template is instantiated, the html is updated. I'm thinking that can be done by using a template tag with a function that operates on the data item somehow. Is that correct? Is there an easier way? <br /><br />This is way cool, by the way!Mark Rubinhttps://www.blogger.com/profile/11608134607290215166noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-14880467897367748222010-10-20T02:36:35.828-07:002010-10-20T02:36:35.828-07:00Would you think that these templates could be used...Would you think that these templates could be used to generate data-entry forms and/or grids ?<br /><br />If that is the case, which forms & grids plugins would you recommend ?<br /><br />DidierUnknownhttps://www.blogger.com/profile/09742977499520206631noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-72411373405895071542010-10-17T15:04:11.402-07:002010-10-17T15:04:11.402-07:00@ xuanvuz: If the teams array is identical to the ...@ xuanvuz: If the teams array is identical to the static version, then something else is different :). Is the results container element ready? Try not calling getJSON until after DOM Ready, and see if that works...<br /><br />For remote templates, it could be any text file, that you load with an AJAX call. It can also be a js file that you load statically or dynamically, in which the template string is defined. Then you should use jQuery.template to compile the template from the string, and go from there, rendering it using jQuery.tmpl.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-64263730855436593502010-10-14T13:18:31.244-07:002010-10-14T13:18:31.244-07:00Hi Boris, that's what I thought, but I'm h...Hi Boris, that's what I thought, but I'm having problem.<br /><br />This works:<br /><br />var teams = [{ TeamName: "Defenders", Manager: "David" }, { TeamName: "Midfielders", Manager: "Paul"}]<br />$('#teamsTemplate').tmpl(teams).appendTo('#results');<br /><br />This does not work, using Firebug, I can see that the "teams" object have values in them:<br /><br />$.getJSON('/Home/GetTeams', function (teams) {<br />$('#teamsTemplate').tmpl(teams).appendTo('#results');<br />});<br /><br />One more question: How do I put the templates (html) on a seperate file? What extension I should use and what do I need to load it? I want to keep the "view" separated.<br /><br />Thanks.Unknownhttps://www.blogger.com/profile/05281377115409150315noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-58748246397409943922010-10-14T11:03:38.824-07:002010-10-14T11:03:38.824-07:00@xuhanvuz: Just pass the object/array to the tmpl ...@xuhanvuz: Just pass the object/array to the tmpl method. The JSON returned should get eval'ed as an object or an array. Look at the remote data examples, here, <a href="http://api.jquery.com/tmpl/" rel="nofollow">http://api.jquery.com/tmpl/</a>, or the demos on GitHub for examples...Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.com