Knockout Talk, Example 3

by Brian Dukes

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div id="wrap">
    <h2 data-bind="text: title"></h2>
    <ol data-bind="foreach: questions">
        <li>
            <label data-bind="attr: { for: 'q' + $index() }">
                Question: 
            </label>
            <input data-bind="value: title, attr: { id: 'q' + $index() }" />
        </li>
    </ol>
    <ol data-bind="foreach: questions">
      <li data-bind="text: title"></li>
    </ol>
</div>

JavaScript

/*globals ko */
ko.applyBindings({
    formId: 1,
    title: 'Contact Form',
    questions: [{
        title: ko.observable('Name'),
        type: 'text'},
    {
        title: ko.observable('Reason'),
        type: 'dropdown',
        answers: ['Sales', 'Support']},
    {
        title: ko.observable('Message'),
        type: 'textarea'}]
}, document.getElementById('wrap'));