Skip to content

Instantly share code, notes, and snippets.

@OakRaven

OakRaven/app.coffee

Created January 6, 2012 17:31
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save OakRaven/1571576 to your computer and use it in GitHub Desktop.
Save OakRaven/1571576 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Test for CoffeeScript and KnockoutJS
Raw
app.coffee
class ComboBoxItem
constructor: (@id, @name) ->
class App
textEntry: ko.observable("")
collection: ko.observableArray([])
addToCollection: ->
item = new ComboBoxItem(@collection().length, @textEntry())
@collection.push(item)
@textEntry("")
$('#text-entry').focus()
return
removeItem: (item) =>
@collection.remove(item)
return
$ ->
viewModel = new App()
ko.applyBindings viewModel
$('#text-entry').focus()
return
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Knockout - CoffeeScript Testbed</title>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="knockout-2.0.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#">
<input id='text-entry' data-bind="value: textEntry, valueUpdate: 'afterkeypress'" />
<button data-bind="click: addToCollection, enable: textEntry().length > 0">Add</button>
</form>
<ul data-bind="foreach: collection">
<li><span data-bind="text: name">Test</span> (<a href="#" data-bind="click: removeItem.bind($data)">Remove</a>)</li>
</ul>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment