KnockoutJS Model - Contact Info

by Lars Holm Jensen

HTML

<div id="container">

    <form id="contactform" >
        <label for="Name">Name: </label>
        <input id="Name" data-bind="value: name" />
        <br />
        <label for="Street">Street: </label>
        <input id="Street" data-bind="value: street" />
        <br />
        <label for="City">City: </label>
        <input id="City" data-bind="value: city" />
        <br />
        <label for="Phone">Phone: </label>
        <input id="Phone" data-bind="value: phone" />
    </form>

    <span data-bind="text: name" >test</span>
    <br />
    <span data-bind="text: street" >test</span>
    <br />
    <span data-bind="text: city" >test</span>
    <br />
    <span data-bind="text: phone" >test</span>
    
</div>

JavaScript

function ContactModel(){
    var self = this;
    
    self.name = ko.observable();
    self.street = ko.observable();
    self.city = ko.observable();
    self.phone = ko.observable();
}



var contactModel = new ContactModel();

window.contactModel = contactModel;

var container = document.getElementById("container");

ko.applyBindings(contactModel, container);