Knockout and jQuery - Lists user Fiddles (new API)

Lists user Fiddles (new API). Using JSONP.

by David Hahn

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
Name:
<input type="text" data-bind="value: name, valueUpdate: 'afterkeydown' ">
<input type="checkbox" data-bind="checked: nameVisible" />
<p>
  Hello, <span data-bind="text: name, visible: nameVisible"></span>
  <br/>
  <span data-bind="text: displayName"></span>

</p>
<button dat-bind="click: changeName">Change Name</button>

JavaScript

$(function() {
  var viewModel = {
    name: ko.observable("bob"),
    changeName: function() {
      this.name("steve");
    },
    nameVisible: ko.observable(true)
  };

  viewModel.displayName = ko.computed(function() {
    return this.name() + " is" + (!this.nameVisible() ? " not" : "") + " visible.";
  }, viewModel);
  ko.applyBindings(viewModel);
});