caloggins
6/17/2011 - 12:38 AM

simple knockout.js examples

simple knockout.js examples

5-TheCompleteExample.html
content_copyfile_download
<html>
  <head>
    <script src="jquery-1.6.1.min.js"></script> 
    <script src="knockout.js"></script> 
    <script language="javascript">
      var credentialsModel;

      $(function(){
        var SomeModel = Backbone.Model.extend({});

        someModel = new SomeModel();
        someModel.bind("change", function(model, collection){
          alert("You set some_attribute to " + model.get('some_attribute'));
        });

        someModel.set({some_attribute: "some value"});

        function Credentials() {
          this.username = ko.observable("");
          this.password = ko.observable("");
        };

        credentialsModel = new Credentials();

        // The [0] is needed because jQuery always returns a wrapped set and we want the specific <div>
        ko.applyBindings(credentialsModel, $(#login-form")[0]);  
      });
    </script>
  </head>
  <body>
    <form action="/login" id="login-form">
      Username: <input type="text" id="username" data-bind="text: username"><br>
      Password: <input type="password" id="password" data-bind="text: password"><br>
     <button id="login" data-bind="click: login">Login</button>
    </form>
  </body>
</html>
4-LoginView.js
content_copyfile_download
function Credentials() {
  this.username = ko.observable("");
  this.password = ko.observable("");
};

var creds = new Credentials();

ko.applyBindings(creds, $("#login-form")[0]);  // The [0] is needed because jQuery always returns a wrapped set and we want the specific <div>
3-SimpleLoginForm.html
content_copyfile_download
<form action="/login" id="login-form">
  Username: <input type="text" id="username" data-bind="text: username"><br>
  Password: <input type="password" id="password" data-bind="text: password"><br>
  <button id="login" data-bind="click: login">Login</button>
</form>
2-ModelToJSON.js
content_copyfile_download
var someJSON = ko.toJSON(someModel)
1-ModelWithChangedEvents.js
content_copyfile_download
var SomeModel = function() {
  this.some_attribute = ko.observable("");
};

someModel = new SomeModel();

someModel.some_attribute.subscribe(function(newValue) {
    alert("The attribute's new value is " + newValue);
});

someModel.some_attribute("some value");