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:

javascript

  1. // Data
  2. var myTestObj =
  3. {
  4.             "rows":
  5.                         [{"id":1, "title":"Test one", "imagesrc":"images/ajax.gif", "isTest":true},
  6.                         {"id":2, "title":"Test two", "imagesrc":"images/playmini.gif", "isTest":true},
  7.                         {"id":3, "title":"Test three", "imagesrc":"images/playmini.gif", "isTest":true}]
  8. }

And the HTML template:

  1. <table>
  2.             <tr id="JMO1">
  3.                         <td style="border: solid 1px black">!id!</td>
  4.                         <td style="border: solid 1px black">!title!</td>
  5.                         <td style="border: solid 1px black"><img src="!imagesrc!" /></td>
  6.                         <td style="border: solid 1px black">!isTest!</td>
  7.             </tr>
  8. </table>

Posted by Dion Almaer at 9:59 am
10 Comments

++---
2.2 rating from 43 votes

10 Comments »

Comments feed TrackBack URI

*cough* Spry *cough*

http://labs.adobe.com/technologies/spry/

Comment by Tony Petruzzi — August 17, 2007

Yeah, Spry has really set the bar for this. Its nice to see an outside implementation, but its gotta go up against the 800lb.

Comment by Jon Hartmann — August 17, 2007

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.

Comment by Denny Ferrassoli — August 17, 2007

Why Oh Why post articles about over done poorly implimented trash?

Comment by tom — August 17, 2007

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.

Comment by Jon Hartmann — August 17, 2007

Its very cool!

Comment by Tiago Albineli Motta — August 17, 2007

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 :)

Comment by Denny Ferrassoli — August 17, 2007

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.

Comment by David D. — August 17, 2007

@David:
twoBirds is completely based on browserside templating… check this out:
http://system.dlv.phpb002.de

Comment by Frank Thuerigen — August 17, 2007

check this article for an explanation:
http://blog.phpbuero.de/?page_id=10

Comment by Frank Thuerigen — August 17, 2007

Leave a comment

You must be logged in to post a comment.