Permalink
Browse files

Added initial demo for template integration with data link

  • Loading branch information...
1 parent 72452b5 commit f1c9b6be94dd9837ccc49ca66411b7634c21551a @BorisMoore committed Mar 9, 2011
Showing with 124 additions and 100 deletions.
  1. +34 −27 beta2/datalink.html
  2. +5 −5 beta2/jquery.datalink2.js
  3. +0 −68 beta2/jquery.tmpl2.js
  4. +85 −0 beta2/templates-and-datalink.html
View
@@ -6,34 +6,37 @@
<script src="jquery.tmpl2.js" type="text/javascript"></script>
</head>
<body>
- <script id="nameTmpl" type="text/x-jquery-tmpl">
- <hr>
+ <button onclick="showData()">show data</button>
+
+ <script id="showData" type="text/x-jquery-tmpl">
<div>${firstName} ${lastName}</div>
<div>${address.city}</div>
+ <div>${roleColor}</div>
</script>
- <button onclick="setNameAndColor()">
- set name and color</button>
- <button onclick="setCity()">
- set city</button>
- <button onclick="render()">
- render data</button>
+ <button onclick="setNameAndColor()">set name and color</button>
+ <button onclick="setCity()">set city</button>
+ <hr /><br />
<div id="myContainer">
- <hr>
- <div data-jq-bind="css-background-color: roleColor">
+ <p data-jq-bind="css-background-color: roleColor">
Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
- </div>
- <input data-jq-link="firstName" data-jq-bind="firstName" />
- <input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
- <input data-jq-link="address.city" data-jq-bind="address.city" />
+ </p>
+ <p>
+ <input data-jq-link="firstName" data-jq-bind="firstName" />
+ <input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
+ <input data-jq-link="address.city" data-jq-bind="address.city" />
+ <input data-jq-link="roleColor" data-jq-bind="roleColor" />
+ </p>
</div>
- <div id="result"></div>
+ <br /><hr />
+ <b>Console</b>
- <script type="text/javascript">
+ <div id="console"></div>
- var person={
+ <script type="text/javascript">
+ var person = {
firstName: "Jo",
lastName: "Proctor",
address: {
@@ -42,27 +45,31 @@
roleColor: "yellow"
};
- $.dataLink(person,"#myContainer").push();
- $.dataLink("#myContainer",person);//.push();
+ $.dataLink( person, "#myContainer" ).push();
+ $.dataLink( "#myContainer", person );
function titleConvert( value, source, path, target ) {
return source.firstName + " lives in " + value;
}
- function render() {
- $("#nameTmpl").tmpl( person ).appendTo("#result");
- }
-
function setNameAndColor() {
- $.dataSetField( person, "lastName", "Greenford" );
- $.dataSetField( person, "firstName", "Elspeth" );
- $.dataSetField( person, "roleColor", "#8dd" );
+ $.setField( person, "lastName", "Greenford" );
+ $.setField( person, "firstName", "Elspeth" );
+ $.setField( person, "roleColor", "#8dd" );
}
function setCity() {
// Either of these will work, thanks to the binding to intermediate objects
- $.dataSetField( person, "address.city", person.address.city + "Xxx" );
+ $.setField( person, "address.city", person.address.city + "Xxx" );
}
</script>
+
+ <script type="text/javascript">
+ function showData() {
+ $( "#console" ).append("-----------------");
+ $( "#showData" ).tmpl( person ).appendTo( "#console" );
+ }
+ </script>
+
</body>
</html>
@@ -270,7 +270,7 @@ function addBinding( map, from, to, callback, links ) {
}
function convertAndSetField( toPath, val, cnvt ) {
- $.dataSetField( toObj, toPath, cnvt
+ $.setField( toObj, toPath, cnvt
? cnvt( val, source, toPath, toObj, thisMap )
: val
);
@@ -314,7 +314,7 @@ function addBinding( map, from, to, callback, links ) {
}
};
//getEventArgs.splice( toObj )
-//$.dataChangeArray( toObj, "splice", 0, toObj.length, eventArgs || {
+//$.changeArray( toObj, "splice", 0, toObj.length, eventArgs || {
// change: "move",
// oldIndex: toObj.length,
// oldItems: toObj,
@@ -509,7 +509,7 @@ $.extend({
dataPull: function( from, to, maps, callback ) {
// TODO - provide implementation
},
- dataSetField: function( object, path, value ) { // TODO add support for passing in object (map) with newValues to copy from.
+ setField: function( object, path, value ) { // TODO add support for passing in object (map) with newValues to copy from.
if ( path ) {
var $object = $( object ),
args = [{ path: path, value: value }],
@@ -523,12 +523,12 @@ $.extend({
}
}
},
- dataGetField: function( object, path ) {
+ getField: function( object, path ) {
return getField( object, path );
},
// operations: pop push reverse shift sort splice unshift move
- dataChangeArray: function( array, operation ) {
+ changeArray: function( array, operation ) {
var args = $.makeArray( arguments );
args.splice( 0, 2 );
return changeArray( array, getEventArgs[ operation ]( array, args ));
View
@@ -9,14 +9,9 @@
*/
-
-
-
-
// TODO REMOVE clt, newData, itemKeyOffset? Merge recent fixes on jQuery.tmpl.js, such as __, etc.
-
(function( $, undefined ){
var oldManip = $.fn.domManip, tmplItmAtt = "data-jq-item", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
newTmplItems = {}, ctl, newData, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} },
@@ -240,11 +235,6 @@
open: defaultOpen,
close: defaultClose.join( "wrap" )
},
- "pluginOLD": {
- _default: { $2: "null" },
- open: defaultOpen,
- close: defaultClose.join( "pluginOLD" )
- },
"plugin": {
_default: { $2: "null" },
open: defaultOpen,
@@ -259,11 +249,6 @@
_default: { $2: "$data" },
open: "_.push($item.bind($item,_,$1,$2));"
},
- "datalink": {
- _default: { $2: "null" },
-// open: "_.push($item.datalink($3,$1,$2));"
- open: "$item.datalink(_,$3,$1,$2);"
- },
"each": {
_default: { $2: "$index, $value" },
open: "if($notnull_1){$.each($1a,function($2){with(this){",
@@ -309,47 +294,6 @@
// nested template, using {{tmpl}} tag
return $.tmpl( $.template( tmpl ), data, options, this );
},
- datalink: function( content, markup, value, convert ) {
- // nested template, using {{tmpl}} tag
- var test = this.data;
- if( convert ) {
- convert = convert.convert || convert;
- value = convert(value);
- }
- if ( />[^<]*$/.test( content.join(""))) { // TODO later switch to += implementation for perf reasons, which will make this easier.
- // This is in html content
- content[ content.length - 1 ].replace(/(>)[^<]*$/, " data-jq-link='text:"+markup+"'>" + $.encode( value));
-
- } else {
- content.push( $.encode( value));
- }
- },
-// datalink: function( markup, value, convert ) {
-// // nested template, using {{tmpl}} tag
-// var test = this.data;
-// if( convert ) {
-// convert = convert.convert || convert;
-// value = convert(value);
-// }
-// return $.encode(value);
-
-// _.push('<input value="');
-// $item.datalink(_, '(nameConvert) firstName',firstName,nameConvert);
-// _.push('" title="');
-// _.push($item.datalink(' lastName',lastName,null));
-// _.push('" /> <b>');
-// _.push($item.datalink(' lastName',lastName,null));
-// _.push('</b>');}
-
-// _.push('<input value="');
-// _.push($item.datalink('(nameConvert) firstName',firstName,nameConvert));
-// _.push('" title="');
-// _.push($item.datalink(' lastName',lastName,null));
-// _.push('" /> <b>');
-// _.push($item.datalink(' lastName',lastName,null));
-// _.push('</b>');}
-
-// },
wrap: function( call, wrapped ) {
// nested template, using {{wrap}} tag
var options = call[4] || {};
@@ -421,15 +365,6 @@
var tmplItem;
for ( tmplItem in tmplItems ) {
tmplItem = tmplItems[ tmplItem ];
-// $( "*[data-plugin]", tmplItem.nodes ).each( function() {
-// var test = $( this ).attr( "data-plugin" );
-// test.replace( /(\w+)\:(\w+)(?:\(([^\)]*)\))\;?/g, function( all, key, plugin, args ){
-// debugger;
-//
-// });
-
-// eval("var " + test.split(":").join( "=$(this).") + ";" );
-// });
// Raise rendered event
if ( tmplItem.ctl && tmplItem.ctl.onItemRendered ) {
tmplItem.ctl.onItemRendered( tmplItem );
@@ -730,9 +665,6 @@
}
// Store template item as jQuery data on the element
$.data( el, "tmplItem", tmplItem );
-// if ( applyBindInfo && $( "[" + applyBindInfo + "]", el )) {
-// $( tmplItem.data ).link( el ).applyLinks();
-// }
}
function cloneTmplItem( item ) {
var key = item.key;
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
+ <script src="jquery.datalink2.js" type="text/javascript"></script>
+ <script src="jquery.tmpl2.js" type="text/javascript"></script>
+</head>
+<body>
+ <button onclick="showData()">show data</button>
+
+ <script id="showData" type="text/x-jquery-tmpl">
+ <div>${firstName} ${lastName}</div>
+ </script>
+
+ <button onclick="setName( 1 )">set name</button>
+ <button onclick="insertItem()">insertItem</button>
+ <hr />
+
+ <h4>People Grid</h4>
+
+ <table>
+ <tbody id="peopleGrid"></tbody>
+ </table>
+
+ <hr />
+ <b>Console</b>
+
+ <div id="console"></div>
+
+ <script id="myTmpl" type="text/x-jquery-tmpl">
+ <tr>
+ <td colspan="2">
+ Name: <span data-jq-bind="firstName">${firstName}</span>
+ <span data-jq-bind="lastName">${lastName}</span>
+ </td>
+ </tr>
+ <tr>
+ <td><input data-jq-link="firstName" data-jq-bind="firstName" value="${firstName}" /></td>
+ <td><input data-jq-link="lastName" data-jq-bind="lastName" value="${lastName}" /></td>
+ </tr>
+ </script>
+
+ <script type="text/javascript">
+ function render() {
+ $("#nameTmpl").tmpl( person ).appendTo("#result");
+ }
+
+ var people = [
+ {
+ firstName: "Jo",
+ lastName: "Proctor"
+ },
+ {
+ firstName: "Elspeth",
+ lastName: "Jones"
+ }
+ ];
+
+ $( "#peopleGrid" ).html(
+ $( "#myTmpl" ).tmplToString( people, { annotate: true })
+ );
+
+ $( "#peopleGrid" ).tmplActivate( "#myTmpl", people );
+
+ function setName( i ) {
+ $.setField( people[ i ], "firstName", "changedFirst" );
+ $.setField( people[ i ], "lastName", "changedLast" );
+ }
+
+ function insertItem() {
+ $.changeArray( people, "push", {
+ firstName: "newFirst",
+ lastName: "newLast"
+ });
+ }
+ </script>
+
+ <script type="text/javascript">
+ function showData() {
+ $( "#console" ).append("-----------------");
+ $( "#showData" ).tmpl( people ).appendTo( "#console" );
+ }
+ </script>
+</body>
+</html>

0 comments on commit f1c9b6b

Please sign in to comment.