sanikeev · July 25, 2013 12:15
diff --git a/knockout-example.phtml b/knockout-example.phtml
 <!doctype html>
 <html>
  <head><title>User Info</title></head>
 <body>

 <div id="#user" class="user">
  <div class="name">
    <label>User Name</label>
    <input type="text" data-bind="value: name">
  </div>
  <div class="email">
    <label>User Email</label>
    <input type="text" data-bind="value: email">
  </div>
  <div class="phone">
    <label>User Phone</label>
    <input type="text" data-bind="value: phone">
  </div>

  <div class="button" data-bind="css:{progress: in_progress}, click: save"></div>
 <script type="text/javascript">
  function UserViewModel(data){
    var that = this;
    // model variables
    this.name = ko.observable(data.name);
    this.email = ko.observable(data.email);
    this.phone = ko.observable(data.phone);
    // view variables
    this.in_progress = ko.observable(false);
    this.save = function(){
      that.in_progress(true);
      $.put(type: 'json', url: 'user', data: {name: this.name(), email: this.email(), phone: this.phone() }).done(function(){
        alert('saved!');
      }).fail(function(data){
        alert(data.responseText);
      }).always(function(){
        that.in_progress(false);
      });
    }
  }
  
  var user = new UserViewModel(<? echo json_encode(user); ?>);
  ko.applyBindings(user, document.getElementById('#user'));
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head><title>User Info</title></head>
	<body>

	<div id="#user" class="user">
	<div class="name">
	<label>User Name</label>
	<input type="text" data-bind="value: name">
	</div>
	<div class="email">
	<label>User Email</label>
	<input type="text" data-bind="value: email">
	</div>
	<div class="phone">
	<label>User Phone</label>
	<input type="text" data-bind="value: phone">
	</div>

	<div class="button" data-bind="css:{progress: in_progress}, click: save"></div>
	<script type="text/javascript">
	function UserViewModel(data){
	var that = this;
	// model variables
	this.name = ko.observable(data.name);
	this.email = ko.observable(data.email);
	this.phone = ko.observable(data.phone);
	// view variables
	this.in_progress = ko.observable(false);
	this.save = function(){
	that.in_progress(true);
	$.put(type: 'json', url: 'user', data: {name: this.name(), email: this.email(), phone: this.phone() }).done(function(){
	alert('saved!');
	}).fail(function(data){
	alert(data.responseText);
	}).always(function(){
	that.in_progress(false);
	});
	}
	}

	var user = new UserViewModel(<? echo json_encode(user); ?>);
	ko.applyBindings(user, document.getElementById('#user'));
	</script>
	</body>
	</html>