Skip to content
This repository was archived by the owner on Jan 16, 2020. It is now read-only.

Commit f1c9b6b

Browse files
BorisMooreBorisMoore
committed
Added initial demo for template integration with data link
1 parent 72452b5 commit f1c9b6b

File tree

4 files changed

+124
-100
lines changed

4 files changed

+124
-100
lines changed

‎beta2/datalink.html

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,37 @@
66
<script src="jquery.tmpl2.js" type="text/javascript"></script>
77
</head>
88
<body>
9-
<script id="nameTmpl" type="text/x-jquery-tmpl">
10-
<hr>
9+
<button onclick="showData()">show data</button>
10+
11+
<script id="showData" type="text/x-jquery-tmpl">
1112
<div>${firstName} ${lastName}</div>
1213
<div>${address.city}</div>
14+
<div>${roleColor}</div>
1315
</script>
1416

15-
<button onclick="setNameAndColor()">
16-
set name and color</button>
17-
<button onclick="setCity()">
18-
set city</button>
19-
<button onclick="render()">
20-
render data</button>
17+
<button onclick="setNameAndColor()">set name and color</button>
18+
<button onclick="setCity()">set city</button>
19+
<hr /><br />
2120

2221
<div id="myContainer">
23-
<hr>
24-
<div data-jq-bind="css-background-color: roleColor">
22+
<p data-jq-bind="css-background-color: roleColor">
2523
Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
26-
</div>
27-
<input data-jq-link="firstName" data-jq-bind="firstName" />
28-
<input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
29-
<input data-jq-link="address.city" data-jq-bind="address.city" />
24+
</p>
25+
<p>
26+
<input data-jq-link="firstName" data-jq-bind="firstName" />
27+
<input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
28+
<input data-jq-link="address.city" data-jq-bind="address.city" />
29+
<input data-jq-link="roleColor" data-jq-bind="roleColor" />
30+
</p>
3031
</div>
3132

32-
<div id="result"></div>
33+
<br /><hr />
34+
<b>Console</b>
3335

34-
<script type="text/javascript">
36+
<div id="console"></div>
3537

36-
var person={
38+
<script type="text/javascript">
39+
var person = {
3740
firstName: "Jo",
3841
lastName: "Proctor",
3942
address: {
@@ -42,27 +45,31 @@
4245
roleColor: "yellow"
4346
};
4447

45-
$.dataLink(person,"#myContainer").push();
46-
$.dataLink("#myContainer",person);//.push();
48+
$.dataLink( person, "#myContainer" ).push();
49+
$.dataLink( "#myContainer", person );
4750

4851
function titleConvert( value, source, path, target ) {
4952
return source.firstName + " lives in " + value;
5053
}
5154

52-
function render() {
53-
$("#nameTmpl").tmpl( person ).appendTo("#result");
54-
}
55-
5655
function setNameAndColor() {
57-
$.dataSetField( person, "lastName", "Greenford" );
58-
$.dataSetField( person, "firstName", "Elspeth" );
59-
$.dataSetField( person, "roleColor", "#8dd" );
56+
$.setField( person, "lastName", "Greenford" );
57+
$.setField( person, "firstName", "Elspeth" );
58+
$.setField( person, "roleColor", "#8dd" );
6059
}
6160

6261
function setCity() {
6362
// Either of these will work, thanks to the binding to intermediate objects
64-
$.dataSetField( person, "address.city", person.address.city + "Xxx" );
63+
$.setField( person, "address.city", person.address.city + "Xxx" );
6564
}
6665
</script>
66+
67+
<script type="text/javascript">
68+
function showData() {
69+
$( "#console" ).append("-----------------");
70+
$( "#showData" ).tmpl( person ).appendTo( "#console" );
71+
}
72+
</script>
73+
6774
</body>
6875
</html>

‎beta2/jquery.datalink2.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ function addBinding( map, from, to, callback, links ) {
270270
}
271271

272272
function convertAndSetField( toPath, val, cnvt ) {
273-
$.dataSetField( toObj, toPath, cnvt
273+
$.setField( toObj, toPath, cnvt
274274
? cnvt( val, source, toPath, toObj, thisMap )
275275
: val
276276
);
@@ -314,7 +314,7 @@ function addBinding( map, from, to, callback, links ) {
314314
}
315315
};
316316
//getEventArgs.splice( toObj )
317-
//$.dataChangeArray( toObj, "splice", 0, toObj.length, eventArgs || {
317+
//$.changeArray( toObj, "splice", 0, toObj.length, eventArgs || {
318318
// change: "move",
319319
// oldIndex: toObj.length,
320320
// oldItems: toObj,
@@ -509,7 +509,7 @@ $.extend({
509509
dataPull: function( from, to, maps, callback ) {
510510
// TODO - provide implementation
511511
},
512-
dataSetField: function( object, path, value ) { // TODO add support for passing in object (map) with newValues to copy from.
512+
setField: function( object, path, value ) { // TODO add support for passing in object (map) with newValues to copy from.
513513
if ( path ) {
514514
var $object = $( object ),
515515
args = [{ path: path, value: value }],
@@ -523,12 +523,12 @@ $.extend({
523523
}
524524
}
525525
},
526-
dataGetField: function( object, path ) {
526+
getField: function( object, path ) {
527527
return getField( object, path );
528528
},
529529

530530
// operations: pop push reverse shift sort splice unshift move
531-
dataChangeArray: function( array, operation ) {
531+
changeArray: function( array, operation ) {
532532
var args = $.makeArray( arguments );
533533
args.splice( 0, 2 );
534534
return changeArray( array, getEventArgs[ operation ]( array, args ));

‎beta2/jquery.tmpl2.js

Lines changed: 0 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,9 @@
99
*/
1010

1111

12-
13-
14-
15-
1612
// TODO REMOVE clt, newData, itemKeyOffset? Merge recent fixes on jQuery.tmpl.js, such as __, etc.
1713

1814

19-
2015
(function( $, undefined ){
2116
var oldManip = $.fn.domManip, tmplItmAtt = "data-jq-item", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
2217
newTmplItems = {}, ctl, newData, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} },
@@ -240,11 +235,6 @@
240235
open: defaultOpen,
241236
close: defaultClose.join( "wrap" )
242237
},
243-
"pluginOLD": {
244-
_default: { $2: "null" },
245-
open: defaultOpen,
246-
close: defaultClose.join( "pluginOLD" )
247-
},
248238
"plugin": {
249239
_default: { $2: "null" },
250240
open: defaultOpen,
@@ -259,11 +249,6 @@
259249
_default: { $2: "$data" },
260250
open: "_.push($item.bind($item,_,$1,$2));"
261251
},
262-
"datalink": {
263-
_default: { $2: "null" },
264-
// open: "_.push($item.datalink($3,$1,$2));"
265-
open: "$item.datalink(_,$3,$1,$2);"
266-
},
267252
"each": {
268253
_default: { $2: "$index, $value" },
269254
open: "if($notnull_1){$.each($1a,function($2){with(this){",
@@ -309,47 +294,6 @@
309294
// nested template, using {{tmpl}} tag
310295
return $.tmpl( $.template( tmpl ), data, options, this );
311296
},
312-
datalink: function( content, markup, value, convert ) {
313-
// nested template, using {{tmpl}} tag
314-
var test = this.data;
315-
if( convert ) {
316-
convert = convert.convert || convert;
317-
value = convert(value);
318-
}
319-
if ( />[^<]*$/.test( content.join(""))) { // TODO later switch to += implementation for perf reasons, which will make this easier.
320-
// This is in html content
321-
content[ content.length - 1 ].replace(/(>)[^<]*$/, " data-jq-link='text:"+markup+"'>" + $.encode( value));
322-
323-
} else {
324-
content.push( $.encode( value));
325-
}
326-
},
327-
// datalink: function( markup, value, convert ) {
328-
// // nested template, using {{tmpl}} tag
329-
// var test = this.data;
330-
// if( convert ) {
331-
// convert = convert.convert || convert;
332-
// value = convert(value);
333-
// }
334-
// return $.encode(value);
335-
336-
// _.push('<input value="');
337-
// $item.datalink(_, '(nameConvert) firstName',firstName,nameConvert);
338-
// _.push('" title="');
339-
// _.push($item.datalink(' lastName',lastName,null));
340-
// _.push('" /> <b>');
341-
// _.push($item.datalink(' lastName',lastName,null));
342-
// _.push('</b>');}
343-
344-
// _.push('<input value="');
345-
// _.push($item.datalink('(nameConvert) firstName',firstName,nameConvert));
346-
// _.push('" title="');
347-
// _.push($item.datalink(' lastName',lastName,null));
348-
// _.push('" /> <b>');
349-
// _.push($item.datalink(' lastName',lastName,null));
350-
// _.push('</b>');}
351-
352-
// },
353297
wrap: function( call, wrapped ) {
354298
// nested template, using {{wrap}} tag
355299
var options = call[4] || {};
@@ -421,15 +365,6 @@
421365
var tmplItem;
422366
for ( tmplItem in tmplItems ) {
423367
tmplItem = tmplItems[ tmplItem ];
424-
// $( "*[data-plugin]", tmplItem.nodes ).each( function() {
425-
// var test = $( this ).attr( "data-plugin" );
426-
// test.replace( /(\w+)\:(\w+)(?:\(([^\)]*)\))\;?/g, function( all, key, plugin, args ){
427-
// debugger;
428-
//
429-
// });
430-
431-
// eval("var " + test.split(":").join( "=$(this).") + ";" );
432-
// });
433368
// Raise rendered event
434369
if ( tmplItem.ctl && tmplItem.ctl.onItemRendered ) {
435370
tmplItem.ctl.onItemRendered( tmplItem );
@@ -730,9 +665,6 @@
730665
}
731666
// Store template item as jQuery data on the element
732667
$.data( el, "tmplItem", tmplItem );
733-
// if ( applyBindInfo && $( "[" + applyBindInfo + "]", el )) {
734-
// $( tmplItem.data ).link( el ).applyLinks();
735-
// }
736668
}
737669
function cloneTmplItem( item ) {
738670
var key = item.key;

‎beta2/templates-and-datalink.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
5+
<script src="jquery.datalink2.js" type="text/javascript"></script>
6+
<script src="jquery.tmpl2.js" type="text/javascript"></script>
7+
</head>
8+
<body>
9+
<button onclick="showData()">show data</button>
10+
11+
<script id="showData" type="text/x-jquery-tmpl">
12+
<div>${firstName} ${lastName}</div>
13+
</script>
14+
15+
<button onclick="setName( 1 )">set name</button>
16+
<button onclick="insertItem()">insertItem</button>
17+
<hr />
18+
19+
<h4>People Grid</h4>
20+
21+
<table>
22+
<tbody id="peopleGrid"></tbody>
23+
</table>
24+
25+
<hr />
26+
<b>Console</b>
27+
28+
<div id="console"></div>
29+
30+
<script id="myTmpl" type="text/x-jquery-tmpl">
31+
<tr>
32+
<td colspan="2">
33+
Name: <span data-jq-bind="firstName">${firstName}</span>
34+
<span data-jq-bind="lastName">${lastName}</span>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td><input data-jq-link="firstName" data-jq-bind="firstName" value="${firstName}" /></td>
39+
<td><input data-jq-link="lastName" data-jq-bind="lastName" value="${lastName}" /></td>
40+
</tr>
41+
</script>
42+
43+
<script type="text/javascript">
44+
function render() {
45+
$("#nameTmpl").tmpl( person ).appendTo("#result");
46+
}
47+
48+
var people = [
49+
{
50+
firstName: "Jo",
51+
lastName: "Proctor"
52+
},
53+
{
54+
firstName: "Elspeth",
55+
lastName: "Jones"
56+
}
57+
];
58+
59+
$( "#peopleGrid" ).html(
60+
$( "#myTmpl" ).tmplToString( people, { annotate: true })
61+
);
62+
63+
$( "#peopleGrid" ).tmplActivate( "#myTmpl", people );
64+
65+
function setName( i ) {
66+
$.setField( people[ i ], "firstName", "changedFirst" );
67+
$.setField( people[ i ], "lastName", "changedLast" );
68+
}
69+
70+
function insertItem() {
71+
$.changeArray( people, "push", {
72+
firstName: "newFirst",
73+
lastName: "newLast"
74+
});
75+
}
76+
</script>
77+
78+
<script type="text/javascript">
79+
function showData() {
80+
$( "#console" ).append("-----------------");
81+
$( "#showData" ).tmpl( people ).appendTo( "#console" );
82+
}
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)