snapshot
/
jsmotif


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script type="text/javascript" src="../build/jsMotif.js"></script>
        
        <title>jsMotif example</title>
    </head>
    <body>
		<h2>Cick on author</h2>
        <div id="template">
            <ul each="{books}">
                <li>
                    <label>title: </label><strong fill="{title}"></strong><br>
                    <label>author: </label><a href="#" rel="author-rel" fill="{author}"></a>
                </li>
            </ul>
        </div>
		<div id="message">
		
		</div>

        <script type="text/javascript">
            var books = { 
                books: [
                    {
                        title: 'Earthquake',
                        author: 'Ian Rohr'
                    },
                    {
                        title: 'Woody Allen',
                        author: 'Eric Lax'
                    },
                    {
                        title: 'Rick Santorum',
                        author: 'Rick Santorum'
                    },
                    {
                        title: 'Memorial Day',
                        author: 'Vince Flynn'
                    },
                    {
                        title: 'Earthquake',
                        author: 'Greg Roza'
                    }
                ]
               };
            
            var tpl = new jsMotif.Template({
                    template: 'template',
                    targetNode: 'template',
					events:[{
						rel: 'author-rel',
						name: 'click',
						handler: function(book){
							/**
								Since rel is placed within 'each' instruction it has changed scope and instead of entire 'books' object,
								proper element from 'books' array is returned
							*/
						
							var messageElem = document.getElementById('message');
							messageElem.innerHTML = 'You have selected <b>' + book.author + '</b>';
						}
					}]
                });
            
            tpl.render(books);    
                
                
        </script>
        
    </body>
</html>