Friday, August 17th, 2007
JavaScript Model Objects
Category: JavaScript, Library
Denny Ferrassoli has been thinking about data-binding as it related to JavaScript and HTML, and came up with JavaScript Model Objects.
His example was a simple table row repeater which looks like:
- // Data
- var myTestObj =
- {
- "rows":
- [{"id":1, "title":"Test one", "imagesrc":"images/ajax.gif", "isTest":true},
- {"id":2, "title":"Test two", "imagesrc":"images/playmini.gif", "isTest":true},
- {"id":3, "title":"Test three", "imagesrc":"images/playmini.gif", "isTest":true}]
- }
And the HTML template:
- <table>
- <tr id="JMO1">
- <td style="border: solid 1px black">!id!</td>
- <td style="border: solid 1px black">!title!</td>
- <td style="border: solid 1px black"><img src="!imagesrc!" /></td>
- <td style="border: solid 1px black">!isTest!</td>
- </tr>
- </table>
2.2 rating from 43 votes
*cough* Spry *cough*
http://labs.adobe.com/technologies/spry/
Yeah, Spry has really set the bar for this. Its nice to see an outside implementation, but its gotta go up against the 800lb.
Although I thought I had a great idea started I ran across jTemplates yesterday, a plugin for jQuery, which does pretty much what I was aiming for: http://jtemplates.tpython.com/
Spry looks like it does the job as well, wasn’t aware of it.
Why Oh Why post articles about over done poorly implimented trash?
I wouldn’t call it poorly implemented, and there is no shame in building whats been done before. A smart idea is a smart idea, even if it has been done before.
Its very cool!
Thanks Jon.
Tom, as far as your comment goes: in my post I clearly state this was an idea and my implementation was to show just that.
I also refactored the code afterwards and was able to get much better performance with 50 rows at 0.125 sec’s compared to 2+ sec’s in this implementation. If anyone is interested I can send them the source, however after seeing Spry and jTemplates I don’t see the need to re-invent this wheel :)
Trimpath Template library http://code.google.com/p/trimpath/wiki/JavaScriptTemplates is a very rich template solution I’ve been looking at for my project. I also found this article http://ajaxpatterns.org/Browser-Side_Templating . I’d like to hear about any library’s that do the same.
@David:
twoBirds is completely based on browserside templating… check this out:
http://system.dlv.phpb002.de
check this article for an explanation:
http://blog.phpbuero.de/?page_id=10