m1sta/bindi.html

## bindi.html
<html>
    <head>
        <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="bindi.js"></script>
        <script type="text/javascript">

            //filters used in binding, also available within library at bindi.ifEmpty, bindi.upperCase, bindi.fadeIn etc.
            var ifEmpty = function () {if (!this.data.length) return [this.template] };
            var upperCase = function(){return this.newValue.toUpperCase()};
            var lowerCase = function(){return this.newValue.toLowerCase()};
            var fadeIn = function(){this.el.hide(); this.parent.appendChild(this.el); this.el.fadeIn();};
            var fadeOut = function(){this.el.fadeOut(function(){this.delete()});};

            //example model
            var memberTemplate = { personName: "defaultPersonName" };
            var bandTemplate = { bandName: "defaultBandName", members: [memberTemplate] };
            var bands = [bandTemplate];

            //actual binding
            var bandItem = bindi(".bandItem").link(bands);
            var bandItemsEmpty = bindi(".noBands").link(bands, ifEmpty);
            var memberItem = bindi(".memberItem").link(bandItem.members);
            var memberItemsEmpty = bindi(".noMembers").link(bandItem.members, ifEmpty);

            //actual binding of custom functions for validation, reformat, and animation
            bandItem
                .on('read', 'bandName', upperCase)
                .on('write', 'bandName', lowerCase)
                .on('add', fadeIn)
                .on('remove', fadeOut)
                .on('dblclick', function(event){
                    alert(this.innerHTML)
                });

        </script>
    </head>
    <body>
        <div class="bindi template">
            <div class="noBands">There are no bands in the list.</div>
            <ul>
                <li class="bandItem">
                    <input value="{bandItem}.bandName" />
                    <a href="#" onclick="bands.pop({bandItem})">Remove Band</a>
                    <div class="noMembers">There are no members listed for this band.</div>
                    <ul>
                        <li class="memberItem">
                            <input value="{memberItem}.personName" />
                            <a href="#" onclick="{bandItem}.members.pop({memberItem})">Remove Member</a>
                        </li>
                    </ul>
                    <a href="#" onclick="{bandItem}.members.push(memberTemplate)">New Member</a>
                </li>
            </ul>
            <a href="#" onclick="bands.push(bandTemplate)">New Band</a>
         </div>
     </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="bindi.js"></script>
	<script type="text/javascript">

	//filters used in binding, also available within library at bindi.ifEmpty, bindi.upperCase, bindi.fadeIn etc.
	var ifEmpty = function () {if (!this.data.length) return [this.template] };
	var upperCase = function(){return this.newValue.toUpperCase()};
	var lowerCase = function(){return this.newValue.toLowerCase()};
	var fadeIn = function(){this.el.hide(); this.parent.appendChild(this.el); this.el.fadeIn();};
	var fadeOut = function(){this.el.fadeOut(function(){this.delete()});};

	//example model
	var memberTemplate = { personName: "defaultPersonName" };
	var bandTemplate = { bandName: "defaultBandName", members: [memberTemplate] };
	var bands = [bandTemplate];

	//actual binding
	var bandItem = bindi(".bandItem").link(bands);
	var bandItemsEmpty = bindi(".noBands").link(bands, ifEmpty);
	var memberItem = bindi(".memberItem").link(bandItem.members);
	var memberItemsEmpty = bindi(".noMembers").link(bandItem.members, ifEmpty);

	//actual binding of custom functions for validation, reformat, and animation
	bandItem
	.on('read', 'bandName', upperCase)
	.on('write', 'bandName', lowerCase)
	.on('add', fadeIn)
	.on('remove', fadeOut)
	.on('dblclick', function(event){
	alert(this.innerHTML)
	});

	</script>
	</head>
	<body>
	<div class="bindi template">
	<div class="noBands">There are no bands in the list.</div>
	<ul>
	<li class="bandItem">
	<input value="{bandItem}.bandName" />
	<a href="#" onclick="bands.pop({bandItem})">Remove Band</a>
	<div class="noMembers">There are no members listed for this band.</div>
	<ul>
	<li class="memberItem">
	<input value="{memberItem}.personName" />
	<a href="#" onclick="{bandItem}.members.pop({memberItem})">Remove Member</a>
	</li>
	</ul>
	<a href="#" onclick="{bandItem}.members.push(memberTemplate)">New Member</a>
	</li>
	</ul>
	<a href="#" onclick="bands.push(bandTemplate)">New Band</a>
	</div>
	</body>
	</html>