JSFiddle - React, Tailwind, and code Playground

by joshrivers

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/examples/resources/twitterApi.js"></script>
<script id="tweetTemplate" type="text/x-jquery-tmpl">
    <li>
        <img src="${ profile_image_url }"/><a class="twitterUser" href="http://twitter.com/${ from_user }">${ from_user }</a>${ text }
    </li>
</script>
<script id="tweetsTemplate" type="text/x-jquery-tmpl">
    <h1>${Title}</h1><input type="button" id="updateButton" value="update"/>
    <ol id="tweetList">
        {{tmpl(Tweets) "#tweetTemplate"}}
    </ol>
</script>
<div id="placeHolder"></div>

JavaScript

var twitter = {
    Title: "Tweets From Tumblr",
    Tweets: []
};
function updateTweets() {
    twitterApi.getTweetsForUsers(["tumblr"], 
     function(data) {
        var item = $("#tweetList").tmplItem();
        item.data.Tweets = data;
        item.update();
    });
};

$("#tweetsTemplate").tmpl(twitter).appendTo("div");
$("#updateButton").click(updateTweets);