Bootstrap Horizontal Form with KO custom bindings

by bradleytrager

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<form data-bind="horizontalForm:$root">
    <label>Email</label>
    <input type="text" id="inputEmail" placeholder="Email" />
    <label>Password</label>
    <input type="password" id="inputPassword" placeholder="Password" />
    <label>
        <input type="checkbox" />Remember me</label>
    <button type="submit" class="btn">Sign in</button>
</form>

JavaScript

ko.bindingHandlers.horizontalForm = {
    update: function (element, valueAccessor) {
        $(element).addClass("form-horizontal");
        $(element).find("input[type=text]").prev('label').addClass("control-label");
        $(element).find("input[type=password]").prev('label').addClass("control-label");
        $(element).find("input[type=checkbox]").parent("label").addClass("checkbox");
        $(element).find("input[type=text]").wrap('<div class="controls" />');
        
        $(element).find("input[type=password]").wrap('<div class="controls" />');
        $(element).find("label + div.controls").wrap('<div class="control-group" />');
        
        $(element).find("label.checkbox").wrap('<div class="control-group"><div class="controls"></div></div>');
        $(element).find("button").wrap('<div class="control-group"><div class="controls"></div></div>');
    }
};
var viewModel = {
};
ko.applyBindings(viewModel);