Knockout bind to existing elements

Add bindings to existing DOM elements, MUST use jQuery .attr NOT .data !!!

by Ben Clayton

HTML

<script src="https://flowcms.infxsolutions.com/script/jQuery/jquery-2.1.1.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js"></script>
This shows how jQuery could be used to add a Knockout viewmodel to an existing form with bindings and picking up of initial values

<hr/>
<form id='Form1'>
    Forename:<input type="text" name='forename' value='Fred' /><br/>
    Surname: <input type='text' name='surname' /><br/>

    <br/>
    <br/>
    <a id="submit">Show KO Data</a>

</form>
<hr/>
<br/>
    * The binding config must be put on the elements using jQuery <b>.attr()</b>  NOT <strike>.data()</strike> otherwise 'ko.applyBindings' will not see the bind config.<br/><br/>
    * The values can be put on elements BUT they are not picked up by ko when the apply bindings is done. This has to be done as an initial value for observable.(note extra code to do this *1)

CSS

a {border:1px solid black;background:#F0F0F0;padding:2px;}
form {background-color:#FFF0F0;padding:10px;}

JavaScript

function viewModel() {
  var self=this;
}


function init_ko(){  
    debugger;
    var vm = new viewModel();
    vm.forename = ko.observable($('[name="forename"]').val());// *1
    vm.surname = ko.observable($('[name="surname"]').val());
    vm.btnSubmit = function(e){
        //debugger;
        //e.preventDefault();
        alert("ko to JS: \n" + JSON.stringify(ko.toJS(this), undefined, 2))
    };
    
    $('[name="forename"]').attr('data-bind',"value: forename"); 
    $('[name="surname"]').attr('data-bind',"value: surname");
    $('#submit').attr('data-bind',"click: btnSubmit");

    ko.applyBindings(vm, document.getElementById("Form1"));

    return vm;
}


var vm=init_ko();
console.log('forename:'+vm.forename());