Skip to content

Instantly share code, notes, and snippets.

Created November 16, 2011 14:55
Show Gist options
  • Save anonymous/1370237 to your computer and use it in GitHub Desktop.
Save anonymous/1370237 to your computer and use it in GitHub Desktop.
Template Testing
var builds = [
{ name: "AddIn", testStatus: "success" },
{ name: "iOS", testStatus: "success" },
{ name: "Three Byte Library", testStatus: "fail" },
{ name: "Web Service", testStatus: "success" }
];
var buildStatus = function(build) {
if(build.testStatus === "OK"){
this.statusClass = "successStatus";
} else {
this.statusClass = "failStatus";
}
this.name = build.name;
}
var viewModel = {
testBuilds: ko.observableArray()
};
for (var i=0; i < builds.length; i++){
viewModel.testBuilds.push(new buildStatus(builds[i]));
};
ko.applyBindings(viewModel);
alert(viewModel.testBuilds()[0].name);
alert(viewModel.testBuilds()[0].statusClass);
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="statusBoard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<script type="text/javascript" src="js/knockout-1.2.1.js"></script>
<script type="text/javascript" src="js/statusBoard.js"></script>
</head>
<body style="background-color:#fff; color:#000">
<table id="buildTestStatus">
<tbody data-bind="template: {name:'testBuildTemplate', foreach: testBuilds}"></tbody>
</table>
<script type="text/x-jquery-tmpl" id="testBuildTemplate">
<tr><td data-bind="id: statusClass"></td><td data-bind="text: name"></td></tr>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment