Knockout Blog Post

index.html

<ul data-bind="template: { name : 'tweetTemplate', foreach: tweets }"></ul>

<input type="text" placeholder="search..." data-bind="value: searchTerm" />

<button data-bind="click: search">Search</button>

<script type="text/x-jquery-tmpl" id="tweetTemplate">
    <li class="tweet">
	<img src="${profile_image_url}" alt="${from_user}" />
		<p class="content">
			${from_user}: ${text}<br />
		</p>
		<p class="datetime">${created_at}</p>
		<div class="ui-helper-clearfix"></div>
    </li>
</script>

site.js

var viewModel = {
	searchTerm: ko.observable(""),
	tweets: ko.observableArray([]),
	search: searchTwitter
}
ko.applyBindings(viewModel);

function searchTwitter() {
	$.ajax({
		url: 'http://search.twitter.com/search.json',
		dataType: 'jsonp',
		data: {
			q: viewModel.searchTerm(),
			result_type: 'recent',
			rpp: 20,
			lang: 'en'
		},
		success: handleTwitterResponse
	});
}

function handleTwitterResponse(result) {
	for (var index = result.results.length - 1; index >= 0; index--) {
		viewModel.tweets.unshift(result.results[index]);
	}
}