Knockout Product Edit

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1 data-bind="text: name"></h1>

<p>
    <label>Product</label>
    <br/>
    <input type="text" id="name" data-bind="value: name" />
</p>
<p>
    <label>Category</label>
    <br/>
    <select id="category" data-bind="value: category">
        <option>Select Category</option>
        <option value="tv">TV</option>
        <option value="computer">Computer</option>
        <option value="camera">Camera</option>
    </select>
</p>
<p class="followup" data-bind="visible: category() == 'tv'">
    <label>Screen Size</label>
    <br/>
    <input type="text" id="size" data-bind="value: screenSize" />
</p>
<p class="followup" data-bind="visible: category() == 'computer'">
    <label>Processor</label>
    <br/>
    <input type="text" data-bind="value: processor" />
</p>
<p class="followup" data-bind="visible: category() == 'camera'">
    <label>Megapixels</label>
    <br/>
    <input type="text" data-bind="value: megapixels" />
</p>
<p>
    <label>Description</label>
    <br/>
    <textarea id="message" placeholder="Enter your message here." data-bind="value: description"></textarea>
</p>
<input type="submit" value="Save" class="btn-primary btn" data-bind="click: save" />
<p><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

</p>

CSS

input[type=text], select, textarea {
    width: 200px;
}
textarea {
    height: 100px;
}
body {
    margin-left: 10px;
}
label {
    margin-top: 10px;
}

JavaScript

var vm = {
    name: ko.observable('Panasonic 65" Plasma Display'),
    category: ko.observable('tv'),
    screenSize: ko.observable('65'),
    processor: ko.observable(''),
    megapixels: ko.observable(''),
    description: ko.observable('This is a big TV that will impress your mom. Yeah, she\'ll roll her eyes, but she\'ll be secretly jealous.')
};

vm.save = function() {
    alert('Saving this: ' + JSON.stringify(ko.toJS(vm)));
};

ko.applyBindings(vm);