Knockout - Apply seperate view models to specific parts of a view

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<form id="new_customer" method="post" data-bind="submit: submitCustomer" action="/customers" accept-charset="UTF-8">
    <div>
        <label for="customer_firstName">First Name</label>
        <input id="customer_firstName"  name="customer[firstName]" data-bind="value: firstName">
    </div>

    <div>
        <label for="customer_lastName">Last Name</label>
        <input id="customer_lastName"  name="customer[lastName]" data-bind="value: lastName">
    </div>    
    
    <div>
        <label for="customer_email">Email</label>
        <input id="customer_email"  name="customer[email]">
    </div>    
    
    <input type="submit" value="Save" name="commit">
</form>

JavaScript

var viewModel = function() {
    this.firstName = ko.observable("Bert");
    this.lastName =ko.observable("Smith");
};
    
var myViewModelInstance = new viewModel();

self.submitCustomer = function(formElement) {
    var jsonToPost = ko.toJSON(myViewModelInstance);
    alert(jsonToPost );
    
    console.log(jsonToPost);
}
    
$(document).ready(function(event) {
      ko.applyBindings(myViewModelInstance)                        
});