Dynamic country specific templating (value-preserving)

by bombo

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script id="formTemp1DE" type="text/html">
    <form id="form1" action="" method="POST">
        <fieldset>
            <legend>Permanent</legend>
            <label for="permStreet">Straße: </label>
            <input id="permStreet" type="text" data-bind="value: Street" /><br />
            <label for="permZIP">PLZ: </label>
            <input id="permZIP" type="text" data-bind="value: ZIP" /><br />
            <label for="permCity">Stadt: </label>
            <input id="permCity" type="text" data-bind="value: City" /><br />
            <label for="permCountry">Land: </label>
            <select id="permCountry" data-bind="value: Country">
                <option value="DE">Deutschland</option>
                <option value="EN">USA</option>
            </select>
        </fieldset>
    </form>
</script>

<script id="formTemp1EN" type="text/html">
    <form id="form1" action="" method="POST">
        <fieldset>
            <legend>Permanent</legend>
            <input id="permStreet" type="text" data-bind="value: Street" />
            <label for="permStreet">&larr; Street</label><br />
            <input id="permZIP" type="text" data-bind="value: ZIP" />
            <label for="permZIP">&larr; ZIP</label><br />
            <input id="permCity" type="text" data-bind="value: City" />
            <label for="permCity">&larr; City</label><br />
            <input id="permState" type="text" data-bind="value: State" />
            <label for="permState" class="bold">&larr; State</label><br />
            <select id="permCountry" data-bind="value: Country">
                <option value="DE">Germany</option>
                <option value="EN">USA</option>
            </select>
            <label for="permCountry">&larr; Country</label>
        </fieldset>
   ...

CSS

fieldset {
    border: 1px dotted #999;
    margin: 10px;
    padding: 5px;
}

.bold {
    font-weight: bold;
}

JavaScript

function Address (country, street, zip, city, state, hasGreenCard) {
    this.Street = ko.observable(street);
    this.ZIP = ko.observable(zip);
    this.City = ko.observable(city);
    this.State = ko.observable(state);
    this.Country = ko.observable(country);
    this.HasGreenCard = ko.observable(hasGreenCard);
}

var viewModel = {
    permanent: new Address('DE'),
    future: new Address('DE')
};

viewModel.tmpl1 = ko.dependentObservable(function() {
    if (this.Country()) {
        return 'formTemp1' + this.Country();
    }
}, viewModel.permanent);

viewModel.tmpl2 = ko.dependentObservable(function() {
    if (this.Country()) {
        return 'formTemp2' + this.Country();
    }
}, viewModel.future);

$(document).ready(function() {
    ko.applyBindings(viewModel);
});