Permalink
Browse files

Removed the out-of-date version of jquery.tmpl.

Updated demo to use the jquery.tmpl beta here: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js.
Moved the demo into a subfolder.
Fixed bug which caused error when adding new contact.
  • Loading branch information...
1 parent 06f116d commit 8e53293f66d6d4a50202ebe44d4cc6ff96f4b419 @BorisMoore committed Oct 12, 2010
Showing with 40 additions and 172 deletions.
  1. +2 −1 { → demos}/demo-contacts.css
  2. +6 −6 { → demos}/demo-contacts.html
  3. +32 −34 { → demos}/demo-contacts.js
  4. +0 −131 jquery.tmpl.js
@@ -6,7 +6,8 @@ http://veerle.duoh.com/blog/comments/a_css_styled_table/
color: #6D929B;
}
.contacts {
- border: 1px solid #C1DAD7
+ border: 1px solid #C1DAD7;
+ margin:20px;
}
.contacts td {
border-right: 1px solid #C1DAD7;
@@ -3,19 +3,19 @@
<head>
<title>My Contacts - Linking Demo</title>
<link type="text/css" rel="Stylesheet" href="demo-contacts.css" />
-<script type="text/javascript" src="jquery.js"></script>
-<script type="text/javascript" src="jquery.datalink.js"></script>
-<script type="text/javascript" src="jquery.tmpl.js"></script>
+<script type="text/javascript" src="../jquery.js"></script>
+<script type="text/javascript" src="../jquery.datalink.js"></script>
+<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript" src="demo-contacts.js"></script>
-<script id="contacttmpl" type="text/html">
+<script id="contacttmpl" type="text/x-jquery-tmpl">
<tr>
<th>&nbsp;</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Numbers</th>
<th>Age</th>
</tr>
- {{each(i,contact) contacts}}
+ {{each contacts}}
<tr class="contact">
<td>
<a href="#" class="contact-remove">remove</a><br/>
@@ -32,7 +32,7 @@
<th>Type</th>
<th>Number</th>
</tr>
- {{each(i,city) phones}}
+ {{each phones}}
<tr class="phone">
<td><a href="#" class="phone-remove">remove</td>
<td><input class="phone phone-type" name="type" type="text" value="${type}" /></td>
@@ -1,4 +1,4 @@
-jQuery(function($){
+jQuery( function( $ ){
// define some basic default data to start with
var contacts = [
@@ -10,39 +10,36 @@ var contacts = [
{ type: "Home", number: "(555) 999-1212" } ] }
];
-// enable using 'contacts' as the name of the template
-$.templates.contacts = $.tmpl($("#contacttmpl").html());
-
-$.extend($.convertFn, {
+$.extend( $.convertFn, {
// linking converter that normalizes phone numbers
- phone: function(value) {// turn a string phone number into a normalized one with dashes
+ phone: function( value ) {// turn a string phone number into a normalized one with dashes
// and parens
- value = (parseInt(value.replace(/[\(\)\- ]/g, ""), 10) || 0).toString();
+ value = (parseInt( value.replace( /[\(\)\- ]/g, "" ), 10 ) || 0 ).toString();
value = "0000000000" + value;
- value = value.substr(value.length - 10);
- value = "(" + value.substr(0,3) + ") " + value.substr(3,3) + "-" + value.substr(6);
+ value = value.substr( value.length - 10 );
+ value = "(" + value.substr( 0, 3 ) + ") " + value.substr( 3, 3 ) + "-" + value.substr( 6 );
return value;
},
- fullname: function(value, source, target) {
+ fullname: function( value, source, target ) {
return source.firstName + " " + source.lastName;
}
});
// show the results of the linking -- object graph is already full of the data
-$("#save").click(function() {
- $("#results").html(JSON.stringify(contacts, null, 4));
+$( "#save" ).click( function() {
+ $( "#results" ).html( JSON.stringify( contacts, null, 4 ));
});
// add a new contact when clicking the insert button.
// notice that no code here exists that explicitly redraws
// the template.
-$("#insert").click(function() {
- contacts.push({ firstName: "", lastName: "", phones: [] });
+$( "#insert" ).click( function() {
+ contacts.push({ firstName: "first", lastName: "last", phones: [], age:20 });
refresh();
});
-$("#sort").click(function() {
- contacts.sort(function(a,b) {
+$( "#sort" ).click( function() {
+ contacts.sort( function( a, b ) {
return a.lastName < b.lastName ? -1 : 1;
});
refresh();
@@ -51,55 +48,56 @@ $("#sort").click(function() {
// function that clears the current template and renders it with the
// current state of the global contacts variable.
function refresh() {
- $(".contacts").empty().append("contacts", {contacts:contacts});
+ $( ".contacts" ).empty();
+ $( "#contacttmpl" ).tmpl( {contacts:contacts} ).appendTo( ".contacts" );
// bind inputs to the data items
- $("tr.contact").each(function(i) {
+ $( "tr.contact" ).each( function(i) {
var contact = contacts[i];
- $("input.contact", this).link(contact);
- $('.agebar', this).link(contact, {
+ $( "input.contact", this ).link( contact );
+ $( '.agebar', this ).link( contact, {
age: {
- convertBack: function(value, source, target) {
- $(target).width(value + "px");
+ convertBack: function( value, source, target ) {
+ $( target ).width( value + "px" );
}
}
});
- $(contact).trigger("changeData", ["age", contact.age]);
+ $( contact ).trigger( "changeData", ["age", contact.age] );
// todo: "update" feature
- $(".contact-remove", this).click(function() {
- contacts.splice(i, 1);
+ $( ".contact-remove", this ).click( function() {
+ contacts.splice( i, 1 );
refresh();
});
var original_firstName = contact.firstName,
original_lastName = contact.lastName;
- $(".contact-reset", this).click(function() {
- $(contact)
- .data("firstName", original_firstName)
- .data("lastName", original_lastName);
+ $( ".contact-reset", this ).click( function() {
+ $( contact )
+ .data( "firstName", original_firstName )
+ .data( "lastName", original_lastName );
});
- $("tr.phone", this).each(function(i) {
+ $( "tr.phone", this ).each( function(i) {
var phone = contact.phones[i];
- $(this).link(phone, {
+ $( this ).link( phone, {
type: "type",
number: {
name: "number",
convert: "phone"
}
});
- $(".phone-remove", this).click(function() {
+ $( ".phone-remove", this ).click( function() {
// note: I'd like to only redraw the phones portion of the
// template, but jquery.tmpl.js does not support nested templates
// very easily. So here I am triggering an arrayChange event on
// the main contacts array to force the entire thing to refresh.
// Note that user input is not lost since the live linking has
// already stored the values in the object graph.
- contact.phones.splice(i, 1);
+ contact.phones.splice( i, 1 );
refresh();
});
});
- $(".newphone", this).click(function() {
+ $( ".newphone", this ).click( function() {
contact.phones.push({ type: "", number: "" });
refresh();
});
View
@@ -1,131 +0,0 @@
-/*
- * jQuery Templating Plugin
- * NOTE: Created for demonstration purposes.
- * Copyright 2010, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- */
-(function(jQuery){
- // Override the DOM manipulation function
- var oldManip = jQuery.fn.domManip;
-
- jQuery.fn.extend({
- render: function( data ) {
- return this.map(function(i, tmpl){
- return jQuery.render( tmpl, data );
- });
- },
-
- // This will allow us to do: .append( "template", dataObject )
- domManip: function( args ) {
- // This appears to be a bug in the appendTo, etc. implementation
- // it should be doing .call() instead of .apply(). See #6227
- if ( args.length > 1 && args[0].nodeType ) {
- arguments[0] = [ jQuery.makeArray(args) ];
- }
-
- if ( args.length === 2 && typeof args[0] === "string" && typeof args[1] !== "string" ) {
- arguments[0] = [ jQuery.render( args[0], args[1] ) ];
- }
-
- return oldManip.apply( this, arguments );
- }
- });
-
- jQuery.extend({
- render: function( tmpl, data ) {
- var fn;
-
- // Use a pre-defined template, if available
- if ( jQuery.templates[ tmpl ] ) {
- fn = jQuery.templates[ tmpl ];
-
- // We're pulling from a script node
- } else if ( tmpl.nodeType ) {
- var node = tmpl, elemData = jQuery.data( node );
- fn = elemData.tmpl || jQuery.tmpl( node.innerHTML );
- }
-
- fn = fn || jQuery.tmpl( tmpl );
-
- // We assume that if the template string is being passed directly
- // in the user doesn't want it cached. They can stick it in
- // jQuery.templates to cache it.
-
- if ( jQuery.isArray( data ) ) {
- return jQuery.map( data, function( data, i ) {
- return fn.call( data, jQuery, data, i );
- });
-
- } else {
- return fn.call( data, jQuery, data, 0 );
- }
- },
-
- // You can stick pre-built template functions here
- templates: {},
-
- /*
- * For example, someone could do:
- * jQuery.templates.foo = jQuery.tmpl("some long templating string");
- * $("#test").append("foo", data);
- */
-
- tmplcmd: {
- each: {
- _default: [ null, "$i" ],
- prefix: "jQuery.each($1,function($2){with(this){",
- suffix: "}});"
- },
- "if": {
- prefix: "if($1){",
- suffix: "}"
- },
- "else": {
- prefix: "}else{"
- },
- html: {
- prefix: "_.push(typeof $1==='function'?$1.call(this):$1);"
- },
- "=": {
- _default: [ "this" ],
- prefix: "_.push($.encode(typeof $1==='function'?$1.call(this):$1));"
- }
- },
-
- encode: function( text ) {
- return text != null ? document.createTextNode( text.toString() ).nodeValue : "";
- },
-
- tmpl: function(str, data, i) {
- // Generate a reusable function that will serve as a template
- // generator (and which will be cached).
- var fn = new Function("jQuery","$data","$i",
- "var $=jQuery,_=[];_.data=$data;_.index=$i;" +
-
- // Introduce the data as local variables using with(){}
- "with($data){_.push('" +
-
- // Convert the template into pure JavaScript
- str
- .replace(/[\r\t\n]/g, " ")
- .replace(/\${([^}]*)}/g, "{{= $1}}")
- .replace(/{{(\/?)(\w+|.)(?:\((.*?)\))?(?: (.*?))?}}/g, function(all, slash, type, fnargs, args) {
- var tmpl = jQuery.tmplcmd[ type ];
-
- if ( !tmpl ) {
- throw "Template not found: " + type;
- }
-
- var def = tmpl._default;
-
- return "');" + tmpl[slash ? "suffix" : "prefix"]
- .split("$1").join(args || def[0])
- .split("$2").join(fnargs || def[1]) + "_.push('";
- })
- + "');}return $(_.join('')).get();");
-
- // Provide some basic currying to the user
- return data ? fn.call( this, jQuery, data, i ) : fn;
- }
- });
-})(jQuery);

0 comments on commit 8e53293

Please sign in to comment.