[digg=http://digg.com/programming/Create_Webapplication_Templates_From_Scratch]I am actually a very strong believer in template technologies, and the objective of this document will be to layout a plan of how you can implement webapplication templates using jquery.
Step 1) Create The Template
I am just going to start off with something simple such as:
<div id=”Blah-Application”>
<div id=”Blah-Application-Header”>
<div class=”header”>Head</div>
</div>
<div id=”Blah-Application-Record”>
<div class=”record-clone”>
<div class=”id”></div>
<div class=”user”></div>
<div class=”date”></div>
</div>
</div>
</div>
Step 2) Bind The Data
var data = [{id:21341,user:'mprokes',date:'12/13/08'},{id:2134234,user:'pants',date:'10/12/08'}]
Populating the records.
var clone = $(‘.record-clone’)
function populate(){
$(data).each(function(){
var cloned = clone.clone();
cloned.addClass(‘record’);
cloned.find(‘.id’).val(this.id);
cloned.find(‘.user’).val(this.user);
cloned.find(‘.date’).val(this.date);
$(‘#Blah-Application-Record’).append(cloned);
});
}
Getting the records.
function getRecords(){
var records = [];
$(‘#Blah-Application-Record .record’).each(function(){
records.push({id:this.find(‘.id’).val(),user:this.find(‘.user’).val(),date:this.find(‘.date’).val()})
});
return records;
}
Step 3) Tagging and sorting the records.
function tagDefaults(){
$(‘#Blah-Application-Record .record’).each(function(){
if(this.find(‘.user’)==’mprokes’ || this.find(‘.user’)==’roger’){
this.addClass(‘default’);
//or you could also change/set attributes, etc. As well as sorting.
//since you get back a list of nodes, you can push, pop,slice, etc those
//nodes from the list, and then re-append the list of nodes again to #Blah-Application-Record
}
});
}
function getDefaults(){
return $(‘#Blah-Application-Record .default’);
}
Conclusion, Creating a view; for a model view controller (MVC) does not need to be hard, it can actually be very easy and straight forward. To simplify your webdevelopment sometimes it is the only way to go. Next time your sit down and write a webapplication try it out, you may be surprised how nicely it works.
~Your Friendly Webdeveloper
Matt Prokes
Posted in Javascript |
..
