Tuesday, November 17, 2009

jPop: Binding Javascript Objects to HTML Automatically

jPop is a jQuery plugin that will automatically bind data from javascript object to the contents of html elements. Example:


<html>
<head>
<title>jPop Example</title>
<script src="/js/jquery/1.3.2/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jpop.js" type="text/javascript"></script>
</head>
<body>
<h1 id="greeting" class="jpop_class"></h1>
<script type="text/javascript">
$(function() {
var jso= { greeting: "Hello, World!" };
$('.jpop_class').jpop(jso);
});
</script>
</body>
</html>


Download jPop.

jPop works with any javascript object and doesn't put restrictions on the data structure. Here is a more complicated example which demonstrates how jpop handles complex data structures and arrays:


<html>
<head>
<title>jPop Example</title>
<script src="/js/jquery/1.3.2/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jpop.js" type="text/javascript"></script>
</head>
<body>
<h1 id="greeting" class="jpop_class"></h1>
<p id="greetingProp.greeting" class="jpop_class"></p>
<p>And,
<span id="greetingProp2:greetingArray" class="jpop_class">
<br><span id="greetingArray.greeting" class="jpop_class"></span>
</span>
<script type="text/javascript">
$(function() {
var jso= {
greeting: "Hello, World!",
greetingProp: {
greeting: "Hello again, World!"
},
greetingProp2: {
greetingArray: [
{ greeting: "Hello, Nick!" },
{ greeting: "Hello, Sri!" },
{ greeting: "Hello, Jody!" },
{ greeting: "Hello, Andrew!" },
{ greeting: "Hello, Heather!" },
{ greeting: "Hello, Ben!" }
]
}
};
$('.jpop_class').jpop(jso);
});
</script>
</body>
</html>


The primary convention is that html element ids are used to reference into the javascript object. In the first example, 'greeting' is a property on the javscript object 'jso' which has the string "Hello, World!". When an html id contains a ':' that will cause the containing html to be cloned and appended to the element and the property name after the ':' can be used to refer to elements of the array within the contained html.

jpop only binds to the elements selected by the jQuery expression. It is not required to use the 'jpop_class" or any other class.

If html form elements are jpopped, the value attribute will be set. Further, when the form is filled out (i.e. a 'change' event occurs), jpop will automatically modify the javascript object with the new form values. Example:


<html>
<head>
<title>jPop Example</title>
<script src="/js/jquery/1.3.2/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jpop.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="text" id="greeting" class='jpop_class'>
<input type="submit" value="modify greeting">
</form>
<script type="text/javascript">
$(function() {
var jso= {
greeting: "Hello, World!"
};
$('.jpop_class').jpop(jso);
$(':submit').click(function() {
alert(jso.greeting);
return false;
});
});
</script>
</body>
</html>

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.