simple knockout.js examples
<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>
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>
<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>
var someJSON = ko.toJSON(someModel)
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");