Knockout Custom Mapping 3

Demonstrates how to add computed observable to observable arrays generated by the kn.mapping plugin

by bradleytrager

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<textarea data-bind="text:ko.toJSON(questions)" rows="20" cols="60"></textarea>
<br/>
<h2 data-bind="text:title"></h2>
<span data-bind="text:firstGroupHeading"></span>

<ul data-bind="foreach:questions()">
    <li><span data-bind="text:QuestionText"></span>

    </li>
</ul>
<button data-bind="click:getSampleForm">Get Sample Form</button>
<button data-bind="click:getNewForm">Get New Form</button>

JavaScript

var data = {
    "form1": {
        "title": "Sample Survey",
            "formQuestions": [{
            "QuestionText": "For each text input, you can choose one of 7 different types of validation types and whether or not a response is required.  Here are a few examples",
                "QuestionType": "1",
                "QuestionMultipleOptions": [],
                "MultipleResponse": []
        }, {
            "QuestionText": "Email",
                "QuestionType": "2",
                "QuestionMultipleOptions": [],
                "Required": true,
                "ValidationType": "email",
                "MultipleResponse": []
        }, {
            "QuestionText": "Digits",
                "QuestionType": "2",
                "QuestionMultipleOptions": [],
                "Required": true,
                "ValidationType": "digits",
                "MultipleResponse": []
        }, {
            "QuestionText": "Numeric",
                "QuestionType": "2",
                "QuestionMultipleOptions": [],
                "Required": true,
                "ValidationType": "number",
                "MultipleResponse": []
        }, {
            "QuestionText": "Multiple Choice Questions",
                "QuestionType": "0",
                "QuestionMultipleOptions": [{}],
                "MultipleResponse": []
        }, {
            "QuestionText": "You can also choose between three different types of multiple choice question types where Radio Buttons and Dropdowns require only one answer, and Checkboxes can have multiple answers.",
                "QuestionType": "1",
                "QuestionMultipleOptions": [],
                "MultipleResponse": []
        }, {
            "QuestionText": "Radio Buttons",
                "QuestionType": "5",
                "QuestionMultipleOptions": [{
                "OptionText": "Option 1"
            }, {
                "OptionText": "Option 2"
            }, {
                "OptionText": "Option 3"
...