Knockout Product Edit

by housecor

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>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.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.mapping.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: 'Panasonic 65" Plasma Display',
    category: 'tv',
    screenSize: '65',
    processor: '',
    megapixels: '',
    description: 'This is a big TV that will impress your mom.'
};

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

vm = ko.mapping.fromJS(vm);
ko.applyBindings(vm);