Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

removed gh-pages stuff

  • Loading branch information...
commit 28494f33d0a6507cb339904e8cc2a62f21f8843f 1 parent 5d6deae
@mrolafsson mrolafsson authored
Showing with 0 additions and 761 deletions.
  1. +0 −194 examples/dribbble.html
  2. +0 −181 examples/test.html
  3. +0 −386 index.html
View
194 examples/dribbble.html
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="UTF-8">
- <title>Tempo :: Dribbble Example</title>
-
- <!-- Import the 1KB CSS Grid -->
- <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
-
- <!-- Import styles for the universal footer -->
- <link rel="stylesheet" href="css/examples.css" type="text/css" media="screen">
-
- <style type="text/css" media="screen">
- /* reset and basic typography */
- body {
- margin: 0;
- padding: 0;
- font-family: Helvetica, Arial, sans-serif;
- }
- html {
- overflow-y: scroll;
- }
- h1, h2, ol#dribbble p {
- font-family: Georgia, "Times New Roman", serif;
- font-weight: normal;
- text-align: center;
- }
- h2 {
- color: #ccc;
- }
- h2 a {
- color: #999;
- text-decoration: none;
- border-bottom: 1px solid #ccc;
- padding-bottom: 2px;
- margin: 0 6px 0 6px;
- }
- h2 a:hover {
- border-bottom: 1px solid #555;
- }
-
- ol {
- margin: 0;
- padding: 0;
- list-style: none outside none;
- }
-
- /* header */
- #header {
- background-color: black;
- margin-bottom: 2em;
- }
- h1 {
- color: white;
- padding: 0.667em 0;
- margin: 0;
- text-align: center;
- }
-
- div#dribbble.loading {
- padding: 6em 0;
- background: url('images/loading.gif') no-repeat center;
- }
- ol#dribbbles li {
- padding: 1.25em 0;
- border-bottom: 1px solid #e9e9e9;
- }
- ol#dribbbles h2 {
- text-align: left;
- font-size: 1.5em;
- color: #666;
- }
- ol#dribbbles h2 a {
- text-decoration: none;
- color: #666;
- border-bottom: 1px solid #ccc;
- padding-bottom: 2px;
- }
- ol#dribbbles h2 a:hover {
- color: #333;
- }
- ol#dribbbles img.player {
- float: left;
- margin-right: 15px;
- }
- ol#dribbbles p.name {
- padding-top: 6px;
- }
-
- .image img {
- float: right;
- padding: 5px;
- border: 1px solid #e9e9e9;
- margin-right: 20px;
- }
-
- </style>
-
- <!-- Import Tempo -->
- <script type="text/javascript" src="../tempo.js"></script>
-
- <!-- This example uses jQuery's ajax() method to retrieve data from Solr -->
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
-
- <script type="text/javascript" charset="utf-8">
- var dribbble = null;
-
- $(document).ready(function() {
- dribbble = Tempo.prepare('dribbble').notify(function(event) {
- if (event.type === TempoEvent.Types.RENDER_STARTING || event.type === TempoEvent.Types.RENDER_COMPLETE) {
- $('div#dribbble').toggleClass('loading');
- }
- });
-
- $('a.choose').click(function(event) {
- $('div#dribbble').html('');
- get(this.hash.substring(1));
- });
-
- get(window.location.hash !== null ? window.location.hash.substring(1) : 'popular');
- });
-
- function get(list) {
- dribbble.starting();
- $.getJSON("http://api.dribbble.com/shots/" + list + "?callback=?", function(data) {
- dribbble.render(data);
- });
- }
- </script>
-
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-10163369-2']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
-</head>
-<body>
-
-
-<!-- Header -->
-<div id="header">
- <div class="row">
- <div class="column grid_12">
- <h1 id="ding">Tempo can Dribbble!</h1>
- </div>
- </div>
-</div>
-
-<div class="row">
- <h2 id="navigation"><a href="#popular" class="choose">Popular</a> | <a href="#debuts" class="choose">Debuts</a> | <a href="#everyone" class="choose">Everyone</a></h2>
-</div>
-
-<div id="dribbble" class="row">
- <h2 class="hits">{{total}} found</h2>
-
- <ol id="dribbbles">
- <li class="row" data-template="shots">
- <div class="column grid_3 image">
- <img src="{{image_url}}" height="150" width="200" />
- </div>
- <div class="column grid_9">
- <h2><a href="{{url}}">{{title}}</a> ({{views_count}})</h2>
-
- <img src="{{player.avatar_url}}" class="player" height="30" width="30" />
- <p class="name">Created by <b>{{player.name}}</b>, {{player.likes_received_count}} likes.
- </div>
- </li>
- </ol>
-</div>
-
-
-<!-- Universal Footer -->
-<ul id="tempo-actions">
- <li><a href="http://twigkit.github.com/tempo/">Back to the Overview</a></li>
- <li class="download"><a href="https://github.com/twigkit/tempo/zipball/master">Download</a></li>
- <li><a href="https://github.com/twigkit/tempo">View on GitHub</a></li>
-</ul>
-<div id="footer">
- <div class="row">
- <p>Brought to you by the friendly guys at <a href="http://twigkit.com/">TwigKit</a>. Follow <a href="http://twitter.com/mrolafsson">Stefan Olafsson</a> and <a href="http://twitter.com/tylertate">Tyler Tate</a> on Twitter.</p>
- </div>
-</div>
-
-
-</body>
-</html>
View
181 examples/test.html
@@ -1,181 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="UTF-8">
- <title>
- Tempo
- </title>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
- <script type="text/javascript" src="../tempo.js"></script>
- <style type="text/css">
- li.brother.Groucho {
- color: red;
- }
-
- li#Gummo {
- text-decoration: line-through;
- }
-
- li.favourite {
- color: green;
- }
-
- a.from {
- display: block;
- font-size: 1.1em;
- font-weight: bold;
- }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var data = [
- {'name':{'first':'Leonard', 'last':'Marx'}, 'nickname':'Chico', 'born': 'March 21, 1887', 'actor': false, 'solo_endeavours' : [
- {'title':'Papa Romani'}
- ]},
- {'name':{'first':'Adolph', 'last':'Marx'}, 'nickname':'Harpo', 'born': 'November 23, 1888', 'actor': true, 'solo_endeavours' : [
- {'title':'Too Many Kisses', 'rating':'favourite'},
- {'title':'Stage Door Canteen'}
- ]},
- {'name':{'first':'Julius Henry', 'last':'Marx'}, 'nickname':'Groucho', 'born': 'October 2, 1890', 'actor': true, 'solo_endeavours' : [
- {'title':'Copacabana'},
- {'title':'Mr. Music', 'rating':'favourite'},
- {'title':'Double Dynamite'}
- ], 'foo':[{'name':'Troll'}, {'name':'Spoll'}]},
- {'name':{'first':'Milton', 'last':'Marx'}, 'nickname':'Gummo', 'born': 'October 23, 1892', 'age': 0},
- {'name':{'first':'Herbert', 'last':'Marx'}, 'nickname':'Zeppo', 'born': 'February 25, 1901', 'actor': true, 'solo_endeavours' : [
- {'title':'A Kiss in the Dark'}
- ]}
- ];
-
- // Simple template
- Tempo.prepare('simple-marx-brothers').render(data);
- // Nested template
- Tempo.prepare('nested-marx-brothers').render(data);
-
- // Multiple templates
- Tempo.prepare('more-marx-brothers').render(data);
-
- // Complex templates
- Tempo.prepare('complex-marx-brothers').render(data);
-
- // jQuery example
- var twitter = Tempo.prepare('jquery-ajax-twitter');
- $.getJSON("http://search.twitter.com/search.json?q='groucho marx'&rpp=5&callback=?", function(data) {
- twitter.render(data.results);
- });
- }
- </script>
- <style type="text/css">
- .tweet img {
- float: left;
- height: 48px;
- width: 48px;
- }
-
- .tweet div {
- margin-left: 58px;
- }
- </style>
-</head>
-<body>
-<h1>
- Tempo &gt; The Simple JavaScript Template Engine
-</h1>
-
-<h3>
- Simple template
-</h3>
-
-<ol id="simple-marx-brothers">
- <li data-template>{{nickname}} {{name.last}} {{age}} {{actor}}
- </li>
-</ol>
-
-<h3>
- Nested templates
-</h3>
-<ol id="nested-marx-brothers">
- <li data-template>{{nickname}} {{name.last}}
- <ul>
- <li data-template="solo_endeavours" class="{{rating}}">
- {{title}}
- </li>
- </ul>
- <ol>
- <li data-template="foo">
- {{name}}
- </li>
- </ol>
- </li>
-</ol>
-<h3>
- Template selectors
-</h3>
-<ul id="more-marx-brothers">
- <li data-template id="{{nickname}}" class="brother">{{name.first}} {{name.last}} was not in any movies!
- </li>
- <li data-template data-if-nickname="Groucho" class="brother {{nickname}}">{{nickname}} (aka {{name.first}}) was
- grumpy!
- </li>
- <li data-template data-if-actor="" class="brother">{{name.first}}, nicknamed '<i>{{nickname}} {{name.last}}</i>'
- was born on {{born}}
- </li>
-</ul>
-
-<h3>
- More complex templates
-</h3>
-<table id="complex-marx-brothers">
- <thead>
- <tr>
- <th>
- Last Name
- </th>
- <th>
- First Name
- </th>
- <th>
- DOB
- </th>
- <th>
- Grumpy
- </th>
- </tr>
- </thead>
- <tbody>
- <tr data-template>
- <td>
- {{name.last}}
- </td>
- <td>
- <a href="#" onclick="alert('{{nickname}}'); return false;">{{name.first}}</a>
- </td>
- <td>
- {{born}}
- </td>
- <td>
- {{if nickname == 'Groucho' && name.last == 'Marx'}}<span>X ({{nickname}})</span>{{endif}}
- </td>
- </tr>
- </tbody>
-</table>
-
-
-<h3>
- Using with jQuery for AJAX
-</h3>
-
-<div id="jquery-ajax-twitter">
- <div data-template class="tweet">
- <img src="{{profile_image_url}}">
-
- <div>
- <a href="http://twitter.com/{{from_user}}">{{from_user}}</a> ({{created_at}})
- <p>
- {{text}}
- </p>
- </div>
- </div>
-</div>
-</body>
-</html>
View
386 index.html
@@ -1,386 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="UTF-8">
- <title>Tempo :: The tiny JSON rendering engine by TwigKit</title>
- <link rel="stylesheet" href="css/tempo.css" type="text/css" media="screen">
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
- <script type="text/javascript" src="tempo.js"></script>
- <!--[if lt IE 9]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <style>
- ol#tweets {
- margin: 0;
- }
- ol#tweets li {
- overflow: hidden;
- list-style: none outside none;
- }
- ol#tweets li img {
- float: left;
- margin-right: 10px;
- width: 48px;
- height: 48px;
- }
- ol#tweets li h3 {
- margin: 0;
- font-size: 0.9em;
- font-family: Helvetica;
- font-weight: bold;
- }
- ol#tweets li p {
- font-size: 0.9em;
- color: #666;
- }
- ol#tweets li:last-child p {
- margin-bottom: 0;
- }
- </style>
- <script>
- $(document).ready(function() {
- // jQuery example
- var twitter = Tempo.prepare('tweets');
- $.getJSON("http://search.twitter.com/search.json?q='groucho marx'&rpp=2&callback=?", function(data) {
- twitter.render(data.results);
- });
- });
- </script>
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-10163369-2']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
-</head>
-<body>
- <div id="top"> </div>
-
- <header id="overview">
- <section id="hero">
- <h1>Tempo <span class="version" style="font-size: 0.5em;">1.1<span></h1>
- <p>Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.</p>
- <nav id="actions">
- <ul>
- <li class="download"><a href="https://github.com/twigkit/tempo/zipball/master">Download</a></li>
- <li><a href="examples/twitter">Twitter Example</a></li>
- <li><a href="examples/solr">Solr Example</a></li>
- <li><a href="https://github.com/twigkit/tempo">View on GitHub</a></li>
- </ul>
- </nav>
- <h3>Why use Tempo?</h3>
- <ul id="why">
- <li>Clear separation of concerns: no HTML in your JavaScript files</li>
- <li>It makes AJAX content easier to work with</li>
- <li>It's as friendly as a bunny rabbit (which are quite friendly)</li>
- </ul>
- <h3>Key Features</h3>
- <ul id="features">
- <li>Works in Safari, Chrome, FireFox, Opera, and Internet Explorer 6+</li>
- <li>Itty-bitty footprint, lightning-fast rendering!</li>
- <li>No dependencies - Works with or without jQuery</li>
- <li>Degrades gracefully if JavaScript is not enabled</li>
- <li>Supports nested and conditional templates</li>
- </ul>
- </section>
- <aside id="example">
- <h3><span>1.</span> Include the Tempo script</h3>
-<pre>
-&lt;script src=&quot;<em>js/tempo.js</em>&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-
-<span>&lt;script&gt;</span>Tempo.<em>prepare</em>("tweets").<em>render</em>(data);<span>&lt;/script&gt;</span>
-</pre>
- <h3><span>2.</span> Compose the data template inline in HTML</h3>
-<pre>
-&lt;ol id=&quot;tweets&quot;&gt;
- &lt;li <em>data-template</em>&gt;
- &lt;img src=&quot;<em>{{profile_image_url}}</em>&quot; /&gt;
- &lt;h3&gt;<em>{{from_user}}</em>&lt;/h3&gt;
- &lt;p&gt;<em>{{text}}</em>&lt;/p&gt;
- &lt;/li&gt;
-&lt;/ol&gt;
-</pre>
- <h3><span>3.</span> Booyah!</h3>
-
- <div class="example">
- <ol id="tweets">
- <li data-template>
- <img src="{{profile_image_url}}" />
- <h3>{{from_user}}</h3>
- <p>{{text}}</p>
- </li>
- </ol>
- </div>
-
- </aside>
- </header>
-
- <article id="usage">
- <header>
- <div>
- <section>
- <h2>Usage</h2>
-
- <nav>
- <ul>
- <li><a href="#json">JSON</a></li>
- <li><a href="#javascript">JavaScript</a></li>
- <li><a href="#html">HTML</a></li>
- <li><a href="#css">CSS</a></li>
- <li><a href="#jquery">jQuery</a></li>
- <li><a href="#advanced">Advanced Topics</a></li>
- </ul>
- </nav>
- </section>
- </div>
- </header>
- <div class="usage">
- <section class="usage">
-
- <a id="json"></a>
- <h3>JSON</h3>
- <p>Tempo takes information encoded as JSON and renders it according to an HTML template. Below is a sample array of JSON data.</p>
-<pre>
-var data = [
- {'name':{'first':'Leonard','last':'Marx'},'nickname':'Chico','born':'March 21, 1887','actor': true,'solo_endeavours':[{'title':'Papa Romani'}]},
- {'name':{'first':'Adolph','last':'Marx'},'nickname':'Harpo','born':'November 23, 1888','actor':true,'solo_endeavours':[{'title':'Too Many Kisses','rating':'favourite'},{'title':'Stage Door Canteen'}]},
- {'name':{'first':'Julius Henry','last':'Marx'},'nickname':'Groucho','born': 'October 2, 1890','actor':true,'solo_endeavours':[{'title':'Copacabana'},{'title':'Mr. Music','rating':'favourite'},{'title':'Double Dynamite'}]},
- {'name':{'first':'Milton','last':'Marx'},'nickname':'Gummo','born':'October 23, 1892'},
- {'name':{'first':'Herbert','last':'Marx'},'nickname':'Zeppo','born':'February 25, 1901','actor':true,'solo_endeavours':[{'title':'A Kiss in the Dark'}]}
-];
-</pre>
-
- <a id="javascript"></a>
- <h3>JavaScript</h3>
- <h4>Include script</h4>
- <p>You only need to include a single, 4kb script.</p>
-<pre>
-&lt;script src=&quot;<em>js/tempo.js</em>&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
-</pre>
- <h4>Tempo.prepare(element)</h4>
- <p>To initialize Tempo, run the <code>prepare()</code> function to scan an HTML container for data templates, cache them in memory, and remove the data template HTML elements from the page. <code>Tempo.prepare(element)</code> returns an instance of a renderer that knows how to layout the data you provide to it.</p>
-
- <h5>element</h5>
- <p class="h5">The <strong>ID</strong> of the HTML element (or the element itself) containing your data template. If you're using jQuery, you may pass in a jQuery object instead.</p>
-
- <p>If the container does not contain a default (that is without conditions and not nested) <code>data-template</code> the entire contents of the container will be considered to represent the template.</p>
-
- <h4>renderer.render()</h4>
- <p>The Tempo.prepare() function returns an instance of a renderer. Once the JSON data is available, run the <code>render(data)</code> function to add the data to the page.</p>
-
- <h5>data</h5>
- <p class="h5">The JSON <strong>data</strong> to be rendered. You'll first need to perform an AJAX call to the JSON data source (see below).</p>
-<pre>
-Tempo.prepare( <em>element</em> ).render( <em>data</em> );
-</pre>
-<pre>
-Tempo.prepare('marx-brothers').render(data);
-</pre>
-
- <a id="html"></a>
- <h3>HTML</h3>
- <h4>data-template</h4>
- <p>Any tag with the <code>data-template</code> attribute will be flagged as a data template.</p>
-
- <h4>{{fields}}</h4>
- <p>Any field represented in the JSON data may be retrieved by referencing the field name inside double brackets.</p>
-<pre>
-&lt;ol id=&quot;marx-brothers&quot;&gt;
- &lt;li <em>data-template</em>&gt;<em>{{nickname}}</em> <em>{{name.last}}</em>&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
- <p>The above example would be rendered as:</p>
- <div class="example">
- <ol id="marx-brothers1">
- <li data-template="">Chico Marx</li>
- <li data-template="">Harpo Marx</li>
- <li data-template="">Groucho Marx</li>
- <li data-template="">Gummo Marx</li>
- <li data-template="">Zeppo Marx</li>
- </ol>
- </div>
-
- <p>If the JSON data represents an array of arrays (which can not be referenced by field/member name) for example:</p>
-
- <div class="example">
- var data = [
- ['Leonard','Marx'],
- ['Adolph','Marx'],
- ['Julius Henry','Marx'],
- ['Milton','Marx'],
- ['Herbert','Marx']
- ];
- </div>
-
- <p>You can reference array elements with the following notation:</p>
-
-<pre>
-&lt;ol id=&quot;marx-brothers&quot;&gt;
- &lt;li <em>data-template</em>&gt;<em>{{[0]}}</em> <em>{{[1]}}</em>&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
- <p>The above example would be rendered as:</p>
- <div class="example">
- <ol id="marx-brothers1">
- <li data-template="">Leonard Marx</li>
- <li data-template="">Adolph Marx</li>
- <li data-template="">Julius Henry Marx</li>
- <li data-template="">Milton Marx</li>
- <li data-template="">Herbert Marx</li>
- </ol>
- </div>
-
- <h4>Nested data-templates</h4>
- <p>Data templates can even be nested within other data templates. Multiple nested templates are supported.</p>
-<pre>
-&lt;li <em>data-template</em>&gt;
- <em>{{nickname}}</em> <em>{{name.last}}</em>
- &lt;ul&gt;
- &lt;li <em>data-template</em>="solo_endeavours"&gt;<em>{{title}}</em>&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/li&gt;
-</pre>
- <div class="example">
- <ol id="marx-brothers2">
- <li>Chico Marx
- <ul>
- <li>Papa Romani</li>
- </ul>
- </li>
- <li>Harpo Marx
- <ul>
- <li>Too Many Kisses</li>
- <li>Stage Door Canteen</li>
- </ul>
- </li>
- <li>Groucho Marx
- <ul>
- <li>Copacabana</li>
- <li>Mr. Music</li>
- <li>Double Dynamite </li>
- </ul>
- </li>
- <li>Gummo Marx</li>
- <li>Zeppo Marx
- <ul>
- <li>A Kiss in the Dark</li>
- </ul>
- </li>
- </ol>
- </div>
-
- <h4>Conditional Templates</h4>
- <p>Tempo provides boolean and value-based conditionals, as well as the ability to define multiple data templates per container (the first matching template wins).</p>
-<pre>
-&lt;ul id="marx-brothers3"&gt;
- &lt;li <em>data-template</em> <em>data-if-nickname</em>="Groucho""&gt;<em>{{nickname}}</em> (aka <em>{{name.first}}</em>) was grumpy!&lt;/li&gt;
- &lt;li <em>data-template</em> <em>data-if-actor</em>&gt;<em>{{name.first}}</em>, nicknamed '&lt;i&gt;<em>{{nickname}}</em> <em>{{name.last}}</em>&lt;/i&gt;' was born on <em>{{born}}</em>&lt;/li&gt;
-
- &lt;!-- Default template --&gt;
- &lt;li <em>data-template</em>&gt;<em>{{name.first}}</em> <em>{{name.last}}</em> was not in any movies!&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
- <div class="example">
- <ul id="marx-brothers4">
- <li>Leonard, nicknamed '<i>Chico Marx</i>' was born on March 21, 1887</li>
- <li>Adolph, nicknamed '<i>Harpo Marx</i>' was born on November 23, 1888</li>
- <li>Groucho (aka Julius Henry) was grumpy!</li>
- <li>Milton Marx was not in any movies!</li>
- <li>Herbert, nicknamed '<i>Zeppo Marx</i>' was born on February 25, 1901</li>
- </ul>
- </div>
-
- <h4>Template Tags</h4>
- <p>Tempo also supports tag blocks.</p>
-
- <h5><code>{{if <i>javascript-expression</i>}} ... {{endif}}</code></h5>
- <p class="h5">The body of the tag will only be rendered if the JavaScript expression evaluates to true.</p>
-
- <a id="css"></a>
- <h3>CSS</h3>
- <p>To ensure that your data template is not visible before being rendered (either because of JavaScript being disabled or due to latency retrieving the data), it's best practice to hide your data templates with CSS. If you add an inline rule of <code>style="display: none;"</code> Tempo will simply remove the inline rule once the data has been rendered.</p>
-<pre>
-&lt;ol id=&quot;tweets&quot;&gt;
- &lt;li data-template <em>style=&quot;display: none;&quot;</em>&gt;
- ...
- &lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
- <a id="jquery"></a>
- <h3>Using Tempo with jQuery</h3>
- <p>jQuery's <a href="http://api.jquery.com/jQuery.getJSON/">getJSON()</a> method provides an easy means of loading JSON-encoded data from the server using a GET HTTP request.</p>
-<pre>
-var twitter = Tempo.<em>prepare</em>('tweets');
-$.getJSON("http://search.twitter.com/search.json?q='marx brothers'&amp;callback=?", function(data) {
- twitter.<em>render</em>(data.results);
-});
-</pre>
- <a id="advanced"></a>
- <h3>Advanced Topics</h3>
-
- <h4>renderer.notify(eventlistener)</h4>
- <p>After preparing a template you can register an event listener by providing a callback function to be notified of events in the lifecycle. The event listener will be called with a single argument, a <code>TempoEvent</code> which has the following properties:</p>
-
- <h5>type</h5>
- <p class="h5">The <strong>type</strong> of the event. Constant values are defined in <code>TempoEvent.Types</code>.</p>
-
- <ul class="h5">
- <li><code>TempoEvent.Types.RENDER_STARTING</code>: Indicates that rendering has started, or been manually triggered by calling <code>starting()</code> on the renderer object.</li>
- <li><code>TempoEvent.Types.ITEM_RENDER_STARTING</code>: Indicates that the rendering of a given individual item is starting.</li>
- <li><code>TempoEvent.Types.ITEM_RENDER_COMPLETE</code>: Indicates that the rendering of a given individual item has completed.</li>
- <li><code>TempoEvent.Types.RENDER_COMPLETE</code>: Indicates that the rendering of all items is completed.</li>
- </ul>
-
- <h5>item</h5>
- <p class="h5">The <strong>item</strong> being rendered. This is only available for the <code>ITEM_RENDER_STARTING</code> and <code>ITEM_RENDER_COMPLETE</code> events.</p>
-
- <h5>element</h5>
- <p class="h5">The HTML <strong>element</strong> or template being used for rendering. This is only available for the <code>ITEM_RENDER_STARTING</code> and <code>ITEM_RENDER_COMPLETE</code> events.</p>
-
- <h4>starting()</h4>
- <p>In some cases you prepare the templates ahead of calling render. In those cases if you would like to e.g. set loader graphics, call the renderer's <code>starting()</code> method just prior to issuing e.g. a jQuery request. This will fire the <code>ITEM_RENDER_STARTING</code> event.</p>
-
-<p>The following example demonstrates use of both methods above. In this case we prepare the templates, and register our event handler function. The event handler is then notified that the jQuery request is about to be issued (when we manually fire <code>RENDER_STARTING</code> with a call to <code>starting()</code>) adding a CSS class to the container. We are then notified that rendering is complete so we can remove the CSS class.
-
-<pre>
-var twitter = Tempo.prepare('tweets').<em>notify</em>( function (event) {
- if (event.type === TempoEvent.Types.RENDER_STARTING || event.type === TempoEvent.Types.RENDER_COMPLETE) {
- $('#tweets').toggleClass('loading');
- }
-});
-twitter.<em>starting</em>();
-$.getJSON(url, function(data) {
- twitter.render(data.results);
-});
-</pre>
-
- </section>
- </div>
- </article>
-
- <nav id="actions2">
- <ul>
- <li class="download"><a href="https://github.com/twigkit/tempo/zipball/master">Download</a></li>
- <li><a href="examples/twitter.html">Twitter Example</a></li>
- <li><a href="examples/solr">Solr Example</a></li>
- <li><a href="https://github.com/twigkit/tempo">View on GitHub</a></li>
- </ul>
- </nav>
-
- <footer id="bottom">
- <section>
- <p>Brought to you by the friendly guys at <a href="http://twigkit.com/">TwigKit</a>. Follow <a href="http://twitter.com/mrolafsson">Stefan Olafsson</a> and <a href="http://twitter.com/tylertate">Tyler Tate</a> on Twitter.</p>
- </section>
- </footer>
-
-</body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.