JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html />
<html>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="tweets-container" class="k-header k-menu-vertical">
<div id="data">
<div>
Loading ...
</div>
</div>
</div>
<script id="template" type="text/x-kendo-template">
<div class="data k-header">
<label>FROM_USER: #= from_user #</label><br />
<label>FROM_USER_ID: #= from_user_id #</label><br />
<label>TEXT: #= text #</label><br />
<label>ID: #= id #</label><br />
<hr />
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
// create a template using the above definition
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json", // the remove service url
dataType: "jsonp", // JSONP (JSON with padding) is required for cross-domain AJAX
data: { //additional parameters sent to the remote service
q: function () {
return "kendo ui";
}
}
}
},
schema: { // describe the result format
data: "results" // the data which the data source will be bound to is in the "results" field
},
change: function () { // subscribe to the CHANGE event of the data source
$("#data").html(kendo.render(template, this.view()));
}
});
// read data from the remote service
dataSource.read();
});
</script>
</html>