tag:blogger.com,1999:blog-3627888979577168137.post4390082775510320361..comments2023-03-26T00:54:12.803-07:00Comments on Dancing with Data: jQuery Templates and JsViews: The RoadmapBoris Moorehttp://www.blogger.com/profile/17923416771395046921noreply@blogger.comBlogger80125tag:blogger.com,1999:blog-3627888979577168137.post-52435099416368134122014-05-29T06:11:13.506-07:002014-05-29T06:11:13.506-07:00Why do people always come from a position of assum...Why do people always come from a position of assuming that free software is somehow obliged to be written the way they want it with the features built how they want it? It's free. You didn't pay for it, or contribute to it, or anything. So what makes you think you have a right to complain when something is changed?<br /><br />If you want a feature that is removed, just fork it and do it yourself, or pay someone to do it for you. No one owes you anything!<br /><br />I'm not actually trying to be mean or antagonistic here, but I wanted to point out that the default position should be one of "thanks for whatever effort you've put in" rather than "it doesn't do it the way I want it so you suck".coolbloke1324https://www.blogger.com/profile/13883530466342507721noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-49942243975788924902014-03-23T15:09:01.799-07:002014-03-23T15:09:01.799-07:00jQuery-tmpl is the official jQuery Templates plugi...jQuery-tmpl is the official jQuery Templates plugin. See above for the history. (It was moved back to my GitHub project by the jQuery UI team, since I was the primary developer of jQuery Templates - when they decided no longer to develop it themselves) <br /><br />The project you link to above has no connection whatsoever to jQuery Templates. It was created a lot more recently, and the design and functionality are completely unrelated to jQuery Templates. They chose to give their templates the same name!! Probably they took advantage of the confusion to attract some interest in their project...Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-62056475943817159652014-03-23T04:09:53.865-07:002014-03-23T04:09:53.865-07:00https://github.com/codepb/jquery-template
what is ...https://github.com/codepb/jquery-template<br />what is the difference between your & this project?Anonymoushttps://www.blogger.com/profile/16973605268132381716noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-36473220418455370672012-08-21T12:34:45.887-07:002012-08-21T12:34:45.887-07:00@Prashanth: For current status, see the JsRender r...@Prashanth: For current status, see the JsRender <a href="https://github.com/BorisMoore/jsrender/blob/master/README.md" rel="nofollow">readme</a>, and also my response to that question <a href="http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html?showComment=1343914754239#c4800795086828732505" rel="nofollow">here</a>.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-71808758237117861052012-08-21T11:36:51.205-07:002012-08-21T11:36:51.205-07:00When is the beta going to come out... We want to u...When is the beta going to come out... We want to use this in our new project, but I am not too sure if this reliable as of now..Prashanth Kotahttps://www.blogger.com/profile/02944090165076723125noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-22088249272927453342012-08-17T10:31:28.656-07:002012-08-17T10:31:28.656-07:00@Artur: You can use the `visible` data-link target...@Artur: You can use the `visible` data-link target. Lot's of examples here: <a href="http://borismoore.github.com/jsviews/demos/step-by-step/07_form-elements.html" rel="nofollow">step-by-step/07_form-elements.html</a>. Soon it will also be possible to bind to <em>{{if</em> and <em>{{else</em> - but not in the current version...Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-52188660168509203022012-08-17T06:29:59.016-07:002012-08-17T06:29:59.016-07:00Hi! Is it possible to do data binding with conditi...Hi! Is it possible to do data binding with conditional templates? I'm trying to write a login status template ("Hello, Unknown! >Login?<" vs "Hi, User123! >Sign out?<") that would re-render on data-bound property change.<br /><br />Is it possible (and I should look for a stupid error of mine), or maybe I should stop trying? :)Artur Gajowyhttps://www.blogger.com/profile/07263590235259066152noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-77844430538308687762012-07-19T07:50:15.882-07:002012-07-19T07:50:15.882-07:00I agree, we had something working and then all of ...I agree, we had something working and then all of a sudden let's make something entirely new! It will be much better, blah blah - then over a year with nothing to use on a production site... it seems to be the norm with jquery core development, this pulling out the rug, just look at what happened with the plugins site for example...Adamhttps://www.blogger.com/profile/05471209045898065502noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-13778409315128372002012-06-23T22:46:50.606-07:002012-06-23T22:46:50.606-07:00JsRender is a client-side template engine. The ter...JsRender is a client-side template engine. The term "template" has become standard in the Web for this kind of library, as well as for server-side technologies which render HTML content against data. See for example <a href="http://en.wikipedia.org/wiki/Template_engine_(web)" rel="nofollow">this Wikipedia article</a>.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-51615452511605360462012-06-22T09:35:30.411-07:002012-06-22T09:35:30.411-07:00Hi Boris,
There's is a difference between te...Hi Boris, <br /><br />There's is a difference between template and layout. What I continually see repeated over the web, and here, is the template word being applied less correctly. Dictionary wise:<br /><br />template: "something that serves as a model for others to copy"<br />layout: "the way in which the parts of something are arranged or laid out"<br /><br />I trust you will review it!<br />Cheersdeverashttps://www.blogger.com/profile/11398164111805918860noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-8380422372260750012012-06-11T08:32:25.251-07:002012-06-11T08:32:25.251-07:00@George: I never replied to this, because use of d...@George: I never replied to this, because use of different iframes, and templates declared as script blocks in the different iframe documents is an advanced scenario, and I don't have a specific proposal/pattern for controlling the access to those templates from different frames. In fact I think that more advanced applications would be advised not to use templates declared in script blocks, but instead use a service-based approach where in effect the templates are loaded (and then compiled) as strings. I expect to provide more specific support for those aspects in the future, but for now, it is up to each application to provide/choose an implementation, if more advanced template management is required.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-9361638893717830292012-02-28T14:51:54.977-08:002012-02-28T14:51:54.977-08:00Hi Boris. First, very impressed with jsRender &...Hi Boris. First, very impressed with jsRender & jsViews; can't wait til they go beta. Second, a question - how can I maintain document context in nested templates? For instance, let's say I have the following markup <i>in an iframe</i>:<br /><br /><script id="columnTemplate" type="text/x-jquery-tmpl"><br /><td>{{=$data}}</td><br /></script><br /><br /><script id="rowTemplate" type="text/x-jquery-tmpl"><br /><tr>{{#each Columns tmpl="#columnTemplate"}}</tr><br /></script><br /><br /><table id="myTable"></table><br /><br />...and let's say that I'm binding this from some javascript in the parent, <i>outside of that iframe</i>, like:<br /><br />$('#myTable', window.frames[0].document).html($.render(someData, $('#rowTemplate', window.frames[0].document)));<br /><br />The rows will get rendered correctly, but the columns won't. I suspect the #columnTemplate isn't being searched for in the context of its parent (the #rowTemplate), but instead being looked for in the outer parent document. Is that a bug? Is there a way to search for the #columnTemplate in the document context of the #rowTemplate (maybe by modifying {{#each Columns tmpl="#columnTemplate"}}?), or a workaround short of merging the nested templates into one?<br /><br />Thanks!<br /><br />GeorgeGeorgehttps://www.blogger.com/profile/01354348967822638127noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-15796173376952810182012-02-24T07:38:13.195-08:002012-02-24T07:38:13.195-08:00I still feel like the decisions to abandon jQuery ...I still feel like the decisions to abandon jQuery Templates, regardless of motivation, hurt the community as a whole.<br /><br />Many of us were excited enough to jump onto a beta product, caveat emptor and all, only to have the rug pulled out from under us.<br /><br />Then, rather than at least moving forward with the existing stuff, we're left hanging in the wind with no options but to wait for someone else to write something completely different (barring forking and maintaining jQuery tmpl ourselves).<br /><br />So, it's been 16 months since the decision was made, and we have nothing new to use. In software development time, that's an eternity.<br /><br />Regardless of the motivations, it left me with a seriously bad taste in my mouth and makes me hesitant to use anything new produced by the jQuery team for fear of another "oops! we changed our minds! message.Anonymoushttps://www.blogger.com/profile/12567838677467442642noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-23445447972905641792012-02-22T19:09:34.265-08:002012-02-22T19:09:34.265-08:00@Tom Sieverding: The data- attributes are about da...@Tom Sieverding: The data- attributes are about data-linking and can result in code running each time the data is modified, or when the user interacts with the element. But the {{}} tags are JsRender template tags which are used to render, and that's all. The {{=...}} tag will only run during rendering, not when the user clicks on the text box. (JsRender is all about pure string-based template rendering and knows nothing about HTML elements or interactivity.)Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-54290950342190801662012-02-21T11:41:57.083-08:002012-02-21T11:41:57.083-08:00Maybe I'm confused at how helpers work, but sh...Maybe I'm confused at how helpers work, but shouldn't in the following example these methods be identical?<br /><br />In the helper tags test, the helper function only alerts during initialization, whereas in the function test, the alert triggers on every update outside of initialization.<br /><br />#modifications from 06_data-binding2.html<br /><br />data-getfrom="[firstName]" data-to="[firstName]:{{=$ctx.test($value)}}"<br /><br />data-getfrom="[firstName]" data-to="[firstName]:test($value)"<br /><br />$.views.registerHelpers({<br /> test: function( value ) { <br /> alert('test');<br /> return value;<br /> }<br />});<br /><br />function test( value ) {<br /> alert('test');<br /> return value;<br />}<br /><br /><br />On a side note, I'd be very interested in seeing a MVVM example.Anonymoushttps://www.blogger.com/profile/13079404942078137195noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-59688689525725937442012-02-06T12:50:55.564-08:002012-02-06T12:50:55.564-08:00Ok, thanks. I will hold back it until the beta can...Ok, thanks. I will hold back it until the beta candidates are available. :)Anonymoushttps://www.blogger.com/profile/16737783041969347637noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-6948189443676644622012-02-06T10:54:11.402-08:002012-02-06T10:54:11.402-08:00@Ibrahim: What you are doing is a fairly advanced ...@Ibrahim: What you are doing is a fairly advanced scenario, and should definitely be possible with JsViews. However you are getting into some features which play on the strong integration between JsViews and JsRender - using the {{#each}} along with fairly complex observable data-linking. I am working hard trying to get an update out for JsRender which is close to being a Beta candidate, and a version of JsViews that integrates with that. There are quite a few major changes coming; it will be both simpler and more powerful. My next stage will be to take JsViews towards a Beta candidate too. <br />So I won't spend time trying to help you solve your scenario with the current bits, since would probably be better to hold back on your paging scenario until the Beta candidates are available... If you need to do it with current bits, then you're kind of on your own there :-) and will just have to debug into it and figure!Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-61832070806822689312012-01-31T14:29:13.529-08:002012-01-31T14:29:13.529-08:00Hello again, my problem is with each this time too...Hello again, my problem is with each this time too. I'm trying to do client side paging. I've tried two method to do that. First, I tried this: <br />{{#each ViewData.Documents.splice(Page*ViewCount,Page*ViewCount+ViewCount) tmpl="#DocumentItem"}}<br />{{/each}}<br />When i use this method, it does not update on methods like sort, filter or with any update.<br />---<br />Second:<br />{{#each $ctx.PageView(ViewData.Documents,Page,ViewCount) tmpl="#DocumentItem"}}<br />{{/each}}<br /><br />Second method does not work correctly because, it can not find $ctx.PageView function after first call for an unknown reason. When I do a debug "$context" parameter seems undefined.<br /><br />What can I do? Thanks.Anonymoushttps://www.blogger.com/profile/16737783041969347637noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-13414096342113884052012-01-22T16:02:45.338-08:002012-01-22T16:02:45.338-08:00Thanks Boris - that did it! I think I was seeing ...Thanks Boris - that did it! I think I was seeing $view in the examples and dismissing the example because I'm not (yet) using jsViews.<br /><br />Thanks for responding so quickly.Dylanhttps://www.blogger.com/profile/18387905134096594504noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-50424597609540601682012-01-21T16:32:54.847-08:002012-01-21T16:32:54.847-08:00@Dylan: The content of the {{each}} tag is a neste...@Dylan: The content of the {{each}} tag is a nested template, so it renders a nested view for each Planet. You can get to the view object by using $view, and then get to its properties, including its data property (the current data item) or step up through parent views and get to their data items. See <a href="https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/07_paths.html#L23" rel="nofollow">this example</a>.<br /><br />So in your case you need<br />{{=$parent.parent.data.from}}. <br />$parent is short for $view.parent, so $parent is the parent view (which has the Planets Array as data item), and $parent.parent is its parent view, (which has as data item the object with the Planets and from properties).Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-53545403402251319832012-01-21T12:06:58.409-08:002012-01-21T12:06:58.409-08:00I'm trying to figure out how to do a simple if...I'm trying to figure out how to do a simple if condition:<br /><br />[select]<br /> {{#each Planets}}<br /> [option value = "{{=name}}" {{#if name === from}}selected{{/if}}]<br />{{=name}}<br />[/option]<br /> {{/each}}<br /> [/select]<br /><br />"Planets" and "from" are both passed to render(), but I'm not sure how to reference "from" from inside the each loopDylanhttps://www.blogger.com/profile/18387905134096594504noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-31598587138905817132012-01-19T10:22:15.893-08:002012-01-19T10:22:15.893-08:00@Betty: Yes, if you want different templates to be...@Betty: Yes, if you want different templates to be used by different items, or a single template that renders differently for different modes, then you will need to store that state somewhere, either on the data, or via helper functions on some other parallel data store. There is a plan for providing a 'presenter' feature later which will allow you to instantiate a presenter object associated with each view item. So you would use that to carry state, and not have to bake it into the data. But for now, the simplest way is just to use the data.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-85753503086004137842012-01-18T22:47:27.416-08:002012-01-18T22:47:27.416-08:00@omegaluz: Yes, I hope we will do that, but not un...@omegaluz: Yes, I hope we will do that, but not until after Beta.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-12557813086593684072012-01-18T22:46:37.049-08:002012-01-18T22:46:37.049-08:00@erik: When you insert a new item, JsViews detects...@erik: When you insert a new item, JsViews detects the observable change and asks JsRender to render just the inserted item, which it then inserts into the HTML at the right point. JsViews is optimised for perf and for maintaining state on the other rendered items - so does this rather than rendering the whole list whenever you insert or remove an item. <br />See <a href="https://github.com/BorisMoore/jsviews/blob/master/demos/step-by-step/04_editable-data.html#L22" rel="nofollow">this sample</a> for data-linking to the index of the item, so that even if you insert items above, the index is fixed to be correct, thanks to data binding. But for your scenario you can either use some kind of ID property on the data if available, or you can provide a helper function to return the index of the data in the array: {{=$ctx.indexInArray($data,$parent.data)}}.Boris Moorehttps://www.blogger.com/profile/17923416771395046921noreply@blogger.comtag:blogger.com,1999:blog-3627888979577168137.post-35898241190469333602012-01-18T10:45:53.041-08:002012-01-18T10:45:53.041-08:00@Betty I have this issue too.@Betty I have this issue too.Anonymoushttps://www.blogger.com/profile/16737783041969347637noreply@blogger.com