Skip to content

Commit

Permalink
Fix to ignore null or undefined members of array data,
Browse files Browse the repository at this point in the history 
when using .tmpl(dataArray) to render template against the array

Fix so that ${foo} when foo is a function will call foo with the
template item as 'this' pointer, rather than having the current data item
as 'this' and passing the template item as a parameter. This removes
dependencies on the signature of the function, so existing functions (not
designed to be called on some this object) will work.
  • Loading branch information
@BorisMoore
BorisMoore committed Jul 23, 2010
1 parent a02d273 commit 748a356
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 23 deletions.
27 changes: 21 additions & 6 deletions demos/movies/PagesCore/movies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h1>Netflix: Book a Movie...</h1>
</script>

<script type="text/javascript">
var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = {}, selectedBooking;

getMovies( pageIndex );
Expand Down Expand Up @@ -192,13 +192,19 @@ <h1>Netflix: Book a Movie...</h1>

$( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });

// show movies in template
$( "#movieList" ).empty();

$( "#movieTmpl" )
.tmpl( movies ) //, { rendered: onMovieRendered } )
// Render movies using the movieTemplate
.tmpl( movies )

// Display rendered movies in the movieList container
.appendTo( "#movieList" )

// Animate
.find( "div" ).fadeIn( 4000 ).end()

// Add click handler
.find( ".buyButton" ).click( function() {
buyTickets( $(this).tmplItem().data );
});
Expand Down Expand Up @@ -239,14 +245,23 @@ <h1>Netflix: Book a Movie...</h1>
switchView( booking, true );
} else {
cart.bookings[booking.movie.Id] = booking;

var bookingNode = $( "#bookingEditTmpl" )

// Render the booking for the chosen movie using the bookingEditTemplate
.tmpl( booking, { animate: true } )
.appendTo( "#bookingsList" ).last()[0];

// Append the rendered booking to the bookings list
.appendTo( "#bookingsList" )

// Attach handlers etc. on the rendered template.
// Pass the template context of the second tr, which the context for the "bookingEditTmpl" template
// Get the 2nd <tr> of the appended booking
.last()[0];

// Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
var newItem = $.tmplItem( bookingNode );
bookingTmplItems[booking.movie.Id] = newItem;

// Attach handlers etc. on the rendered template.
bookingEditRendered( newItem );
}
}
Expand Down
26 changes: 21 additions & 5 deletions demos/movies/PagesTmplPlus/movies1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ <h1>Netflix: Book a Movie...</h1>
</script>

<script type="text/javascript">
var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;

getMovies( pageIndex );
Expand Down Expand Up @@ -196,9 +196,16 @@ <h1>Netflix: Book a Movie...</h1>
$( "#movieList" ).empty();

$( "#movieTmpl" )
.tmpl( movies ) //, { rendered: onMovieRendered } )
// Render movies using the movieTemplate
.tmpl( movies )

// Display rendered movies in the movieList container
.appendTo( "#movieList" )

// Animate
.find( "div" ).fadeIn( 4000 ).end()

// Add click handler
.find( ".buyButton" ).click( function() {
buyTickets( $(this).tmplItem().data );
});
Expand Down Expand Up @@ -239,14 +246,23 @@ <h1>Netflix: Book a Movie...</h1>
switchView( booking, true );
} else {
cart.bookings[booking.movie.Id] = booking;

var bookingNode = $( "#bookingEditTmpl" )

// Render the booking for the chosen movie using the bookingEditTemplate
.tmpl( booking, { animate: true } )
.appendTo( "#bookingsList" ).last()[0];

// Append the rendered booking to the bookings list
.appendTo( "#bookingsList" )

// Attach handlers etc. on the rendered template.
// Pass the template context of the second tr, which the context for the "bookingEditTmpl" template
// Get the 2nd <tr> of the appended booking
.last()[0];

// Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
var newItem = $.tmplItem( bookingNode );
bookingTmplItems.push( newItem );

// Attach handlers etc. on the rendered template.
bookingEditRendered( newItem );
}
}
Expand Down
13 changes: 11 additions & 2 deletions demos/movies/PagesTmplPlus/movies2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h1>Netflix: Book a Movie...</h1>
</script>

<script type="text/javascript">
var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;

getMovies( pageIndex );
Expand Down Expand Up @@ -194,7 +194,10 @@ <h1>Netflix: Book a Movie...</h1>
$( "#movieList" ).empty();

$( "#movieTmpl" )
// Render movies using the movieTemplate
.tmpl( movies, { rendered: onMovieRendered } )

// Display rendered movies in the movieList container
.appendTo( "#movieList" );

$( "#movieList" ).fadeIn( "medium" )
Expand Down Expand Up @@ -233,12 +236,18 @@ <h1>Netflix: Book a Movie...</h1>
switchView( booking, true );
} else {
cart.bookings[booking.movie.Id] = booking;

$( "#bookingEditTmpl" )

// Render the booking for the chosen movie using the bookingEditTemplate
.tmpl( booking, {
animate: true,
rendered: onBookingEditRendered,
addedTmplItems: bookingTmplItems
}).appendTo( "#bookingsList" );
})

// Append the rendered booking to the bookings list
.appendTo( "#bookingsList" );
}
}

Expand Down
10 changes: 7 additions & 3 deletions demos/movies/PagesTmplPlus/movies3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h1>Netflix: Book a Movie...</h1>
</script>

<script type="text/javascript">
var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;

getMovies( pageIndex );
Expand Down Expand Up @@ -188,11 +188,13 @@ <h1>Netflix: Book a Movie...</h1>

$( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });

// show movies in template
$( "#movieList" )
.empty()

// Render movies using the movieTemplate, and display rendered movies in the movieList container
.append( "#movieTmpl", movies, { rendered: onMovieRendered } )
.fadeIn( "fast" );

.fadeIn( "medium" );
}

function buyTickets( movie ) {
Expand Down Expand Up @@ -228,6 +230,8 @@ <h1>Netflix: Book a Movie...</h1>
switchView( booking, true );
} else {
cart.bookings[booking.movie.Id] = booking;

// Render the booking for the chosen movie using the bookingEditTemplate, and append the rendered booking to the bookings list
$( "#bookingsList" ).append( "#bookingEditTmpl", booking, {
animate: true,
rendered: onBookingEditRendered,
Expand Down
12 changes: 5 additions & 7 deletions jquery.tmpl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,11 @@
return []; // Could throw...
}
if ( typeof data === "function" ) {
data = data.call( parentItem.data || {}, parentItem );
data = data.call( parentItem || {} );
}
ret = jQuery.isArray( data ) ?
jQuery.map( data, function( dataItem ) {
return newTmplItem( options, parentItem, tmpl, dataItem );
return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
}) :
[ newTmplItem( options, parentItem, tmpl, data ) ];

Expand Down Expand Up @@ -264,9 +264,7 @@
// Support templates which have initial or final text nodes, or consist only of text
// Also support HTML entities within the HTML markup.
ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
frag = jQuery( middle ).get(); // For now use get(), since buildFragment is not current public
// frag = jQuery.buildFragment( [middle] ); // If buildFragment was public, could do these two lines instead
// frag = frag.cacheable ? frag.fragment.cloneNode(true) : frag.fragment;
frag = jQuery( middle ).get();

storeTmplItems( frag );
if ( before ) {
Expand All @@ -280,7 +278,7 @@
}

function unencode( text ) {
// createTextNode will not render HTML entities correctly
// Use createElement, since createTextNode will not render HTML entities correctly
var el = document.createElement( "div" );
el.innerHTML = text;
return jQuery.makeArray(el.childNodes);
Expand All @@ -301,7 +299,7 @@
.replace( /\${([^}]*)}/g, "{{= $1}}" )
.replace( /{{(\/?)(\w+|.)(?:\(((?:.(?!}}))*?)?\))?(?:\s+(.*?)?)?(\((.*?)\))?\s*}}/g,
function( all, slash, type, fnargs, target, parens, args ) {
var cmd = jQuery.tmpl.tags[ type ], def, expr;
var cmd = jQuery.tmpl.tags[ type ], def, expr, exprAutoFnDetect;
if ( !cmd ) {
throw "Template command not found: " + type;
}
Expand Down

0 comments on commit 748a356

Please sign in to comment.