Bindings in KnockoutJS - Part IIIa

by Jaganathan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

<div data-bind="with: formBinding">
    <p><b>Bindings in KnockoutJS - Part IIIa</b></p>
<form data-bind="submit: submitMe">
    <p>Name: <input type="text" data-bind="value: text, valueUpdate: 'keyup'"></input>Type something to enable submit button</p>
    <button type="submit" data-bind="enable: isEnabled">Submit</button>
</form>
</div>

JavaScript

function FormBinding() {
    var self = this;
    self.text = ko.observable('');
    self.submitMe = function (data, event) 
    { 
        alert('Form submitted'); 
    };
    self.isDisabled = ko.observable(false);
    self.isEnabled = ko.computed(function() 
                                 { 
                                     return this.text().length > 0;}, self);
    
}

ko.applyBindings({formBinding: new FormBinding()});