knockout.js to HTML binding example

kohtmlsample1.html

<div id="osmcopy">
	<a targer="_blank" data-bind="attr: {href: osmCopyURL}">
		<span>OpenStreetMap</span></a>, contributors, 
		<a targer="_blank" data-bind="attr: {href: osmCCURL}">
		<span>CC-BY-SA</span></a>
</div>
<div id="info">
	<span data-bind="text: mapinfo">Extent</span>
	<p/>
	<ul id="details">
		<li><strong>Field Name: </strong><a targer="_blank" data-bind="attr: {href: '#'}, click: search">
		<span data-bind="text: oildetails()[0]"></span></a></li>
		<li><strong>Gas?: </strong><span data-bind="text: oildetails()[1]"></span></li>
		<li><strong>Oil?: </strong><span data-bind="text: oildetails()[2]"></span></li>
	</ul>
</div>

komodelsample.js

var viewModel = {
	mapinfo: ko.observable(),
	oildetails: ko.observableArray([]),
	osmCopyURL: ko.observable(),
	osmCCURL: ko.observable(),
	search: function() {
		// just a demonstration of using a function in view model
		var url = "http://www.google.com/search?as_q=" + this.oildetails()[0] +"+oil+field+kansas";
		var newwindow = window.open(url, 'name');
		if (window.focus) { newwindow.focus(); }
	}
}

Thanks

I tried your code in my chrome browser but not running according to your above scenario.
output :

OpenStreetMap, contributors, CC-BY-SA
Extent
Field Name:
Gas?:
Oil?:

Thanks