-
Notifications
You must be signed in to change notification settings - Fork 7
Tutorial
In this tutorial we are going to use iugo to create a Twitter search client. It should take less than 5 minutes. All of the source material is available under the "sample application" folder in the file repository (http://github.com/chrismichaelscott/iugo/tree/master/sample%20application).
The aim of iugo is to decouple content (data) from markup, so a good place to start is usually the data model.
We are going to take advantage of the Twitter search API, so first off let's get a feel for the result. Head to:
http://search.twitter.com/search.json?q=Javascript
You may want to pass the results to a service like http://jsonlint.org to get a clearer view of the response. You should be able to make out the data model, including an array called results, which has most of the data we want. Specifically, we are going to use results[x].from_user and results[x].text.
Now we are going to design a page for our app. Let's keep it really simple. First off, a boilerplate HTML5 page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="iugo-mvvc.min.js"></script>
<script src="jquery-1.7.1.min.js"></script>
</head>
<body>
<form>
<input type="text"></input><button id="search">search</button>
</form>
<ul>
<li>
<p>Name: <strong></strong></p>
<p></p>
</li>
</ul>
</body>
</html>
We've included iugo and JQuery in the head as we'll use them both later. The form will be used to input a search expression and the ul will contain each result, displaying the name of the Twitter user and the message.
This part is easy - for us, the model is just a reflection of the Twitter API's response. We could mimic the fields all the way down but it is sufficient to just define the top level of the model; in this case the results list.
Add a script tag to the head, below the two libraries, with the Iugo constructor and a simple model:
<script>
$(document).ready(function() {
tweets = new Iugo({
results: []
});
});
</script>
We need to tell iugo where to put the results when they arrive. We will add the class bindto-results to the ul and the data attribute data-bind_each to the li. Then, looking back at the data review, we will apply the data-bind_key attributes to the strong tag and the p tag below, to bind them to the from_user and text keys.
Your body should now read:
<body>
<form>
<input type="text"></input><button id="search">search</button>
</form>
<ul class="bindto-results">
<li data-bind_each class="tweet">
<p>Name: <strong data-bind_key="from_user"></strong></p>
<p data-bind_key="text"></p>
</li>
</ul>
</body>
As it stands, if the data model is updated the DOM will reflect that - exactly what we want but we don't have the data to add to the model. To get the data, we are going to use a simple JQuery ajax call to the Twitter API.
First, add an event listener just under the Iugo constructor, to listen for clicks on the "search" button:
<script>
$(document).ready(function() {
tweets = new Iugo({
results: []
});
$('#search').on('click', function(event) {
event.preventDefault(); // don't let the page refresh!
var query = $(this).siblings('input').val();
});
});
</script>
Then, make the AJAX call and set tweets.results to the results array from the API response. When that is done, iugo will bind the results to the DOM.
<script>
$(document).ready(function() {
tweets = new Iugo({
results: []
});
$('#search').on('click', function(event) {
event.preventDefault(); // don't let the page refresh!
var query = $(this).siblings('input').val();
$.ajax({
url: 'http://search.twitter.com/search.json?q=' + query,
dataType: "jsonp",
success: function(data) {
tweets.results = data.results;
}
});
});
});
</script>
That's it! Go ahead and try a query. If all is working well, you should get a results list on screen
Even though the functionality is in place, it still looks a little ugly. Applying the following stylesheet to the head tag will make things a little prettier.
<style>
html {
height: 100%;
}
body {
background-image: radial-gradient(lightgrey, white);
min-height: 100%;
}
ul {
padding: 0;
}
.tweet {
padding: 12px;
margin-bottom: 6px;
list-style: none;
border-radius: 8px;
border: 1px solid black;
box-shadow: 1px 3px 6px grey;
background-color: white;
}
</style>
I hope the tutorial went well - and hopefully you learned a bit about iugo. The key points to take away from this are the clear decoupling of the data and the markup. No need to inject HTML into the page by hand, for each result. And it someone where attempting to update the HTML later it would be easy to find the li tags and the ps and strong under them.
Thanks!