yreynhout/Viewmodels1.html

## Viewmodels1.html
<html>
  <head>
    <link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css"></link>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.js"></script>
    <script type="text/javascript" src="http://current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.js"></script>
    <script type="text/javascript">
var PageViewModel = function() {
  if (!this instanceof PageViewModel) {
    return new PageViewModel();
  }
  var self = this;
  self.SomeThing = ko.observable(0);
  self.SomeOtherThing = ko.observable(0);
  self.SomeVariable = ko.observable('');
  self.CanEdit = ko.observable(true);
  self.CanSave = ko.observable(true);
  self.Save = function() {
    //Some save action goes here ...
    alert('Hello World: ' + self.SomeVariable());
  };
  //Maybe some more behavior that steers these observables ...
  return self;
};

$(function() {
  var pageViewModel = new PageViewModel();
  ko.applyBindings(pageViewModel,$("#bindMe").get(0));
});
    </script>
  </head>
  <body id="bindMe">
    <form>
      <div data-bind="visible: SomeThing() > 50 && SomeOtherThing() < 30">Some content to show when that expression is true.</div>
      <input name="someVariable" type="text" data-bind="value: SomeVariable, enable: CanEdit" />
      <button data-bind="enable: CanSave, click: Save">Save Me</button>
    </form>
  </body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css"></link>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.js"></script>
	<script type="text/javascript" src="http://current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	var PageViewModel = function() {
	if (!this instanceof PageViewModel) {
	return new PageViewModel();
	}
	var self = this;
	self.SomeThing = ko.observable(0);
	self.SomeOtherThing = ko.observable(0);
	self.SomeVariable = ko.observable('');
	self.CanEdit = ko.observable(true);
	self.CanSave = ko.observable(true);
	self.Save = function() {
	//Some save action goes here ...
	alert('Hello World: ' + self.SomeVariable());
	};
	//Maybe some more behavior that steers these observables ...
	return self;
	};

	$(function() {
	var pageViewModel = new PageViewModel();
	ko.applyBindings(pageViewModel,$("#bindMe").get(0));
	});
	</script>
	</head>
	<body id="bindMe">
	<form>
	<div data-bind="visible: SomeThing() > 50 && SomeOtherThing() < 30">Some content to show when that expression is true.</div>
	<input name="someVariable" type="text" data-bind="value: SomeVariable, enable: CanEdit" />
	<button data-bind="enable: CanSave, click: Save">Save Me</button>
	</form>
	</body>
	</html>