Moving from markup-based KnockoutJS bindings to unobtrusive bindings (Before)

addSpeaker-brief.html

<form data-bind="submit: addSpeaker">
    <fieldset>
        <legend>Speaker Info</legend>
        Name: <input type="text" data-bind="value: name" /> <br />
        Bio: <textarea data-bind="value: bio"></textarea> <br />
        Twitter Handle: <input type="text" data-bind="value: twitterHandle" /> <br />
        State: <input type="text" data-bind="value: state" /> <br />        
    </fieldset>
    <fieldset>
        <legend>Languages</legend>
        New item:
        <input type="text" data-bind='value: languageToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: languageToAdd().length > 0, click: addLanguage">Add</button>
        <p>Your choices:</p>
        <select multiple="multiple" width="50" data-bind="options: languages"> </select>
    </fieldset>
    <input type="submit" value="Create" />
    <!-- Profile Preview -->
    <article id="profilePreview">
        <header>
            <div><img data-bind="attr: {src: photoUrl, alt: name}"/></div>
            <div>
                <h1>
                    <span data-bind="text: name"></span> :: 
                    <a data-bind="attr: {href: twitterUrl}">
                        @<span data-bind="text: twitterHandle"></span>
                    </a>
                </h1>
           </div>
           <div class="subhead">Programs in <span data-bind="text: languages"></span></div>           
        </header>
        <div id="bio">
            <span data-bind="text: bio"></span>. He also lives in <span data-bind="text: state"></span>
        </div>
    </article>
</form>

addSpeaker-brief.js

var viewModel = {
    name: ko.observable(''),
    email: ko.observable(''),
    bio: ko.observable(''),
    twitterHandle: ko.observable(''),
    state: ko.observable(''),
    photoUrl: ko.observable(''),
    languages: ko.observableArray([]),
    languageToAdd: ko.observable('')    
};
viewModel.twitterUrl = ko.dependentObservable(function () {
    return "http://www.twitter.com/" + viewModel.twitterHandle();
});
viewModel.addLanguage = function () {
    if (viewModel.languageToAdd() != '') {
        viewModel.languages.push(viewModel.languageToAdd());
        viewModel.languageToAdd('');
    }
};
viewModel.addSpeaker = function () {
    $.ajax({
        url: "/speakers/create/",
        type: 'post',
        data: ko.toJSON(this),
        contentType: 'application/json'
    });
};
ko.applyBindings(viewModel);

addSpeaker.html

<form data-bind="submit: addSpeaker">
    <fieldset>
        <legend>Speaker Info</legend>
        Name: <input type="text" data-bind="value: name" /> <br />
        Email: <input type="text" data-bind="value: email" /> <br />
        Bio: <textarea data-bind="value: bio"></textarea> <br />
        Twitter Handle: <input type="text" data-bind="value: twitterHandle" /> <br />
        State: <input type="text" data-bind="value: state" /> <br />
        Photo Url: <input type="text" data-bind="value: photoUrl" />    
    </fieldset>
    <fieldset>
        <legend>Languages</legend>
        New item:
        <input type="text" data-bind='value: languageToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: languageToAdd().length > 0, click: addLanguage">Add</button>
        <p>Your choices:</p>
        <select multiple="multiple" width="50" data-bind="options: languages"> </select>
    </fieldset>
    <fieldset>
        Favorite Topics:
        New item:
        <input type="text" data-bind='value: topicToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: topicToAdd().length > 0, click: addTopic">Add</button>
        <p>Your choices:</p>
        <select multiple="multiple" width="50" data-bind="options: favoriteTopics"> </select>
    </fieldset>
    <input type="submit" value="Create" />
    <!-- Profile Preview -->
    <article id="profilePreview">
        <header>
            <div><img data-bind="attr: {src: photoUrl, alt: name}"/></div>
            <div>
                <h1>
                    <span data-bind="text: name"></span> :: 
                    <a data-bind="attr: {href: twitterUrl}">
                        @<span data-bind="text: twitterHandle"></span>
                    </a>
                </h1>
           </div>
           <div class="subhead">Programs in <span data-bind="text: languages"></span></div>
           <div class="subhead">Loves to talk about <span data-bind="text: favoriteTopics"></span></div>
        </header>
        <div id="bio">
            <span data-bind="text: bio"></span>. He also lives in <span data-bind="text: state"></span>
        </div>
        <div id="talks" data-bind="template: 'sessionsTemplate'"></div>
    </article>
    <!-- Sessions Template -->
    <script type="text/html" id="sessionsTemplate">
        <h2>${ name }'s Upcoming Talks</h2>
        <ul>
            {{each sessions}}
                <li><a href="/sessions/${$value}">${$value}</a></li>
            {{/each}}
        </ul>
    </script>
</form>

addSpeaker.js

var viewModel = {
    name: ko.observable(''),
    email: ko.observable(''),
    bio: ko.observable(''),
    twitterHandle: ko.observable(''),
    state: ko.observable(''),
    photoUrl: ko.observable(''),
    languages: ko.observableArray([]),
    favoriteTopics: ko.observableArray([]),
    languageToAdd: ko.observable(''),
    topicToAdd: ko.observable('')    
};
viewModel.twitterUrl = ko.dependentObservable(function () {
    return "http://www.twitter.com/" + viewModel.twitterHandle();
});
viewModel.addLanguage = function () {
    if (viewModel.languageToAdd() != '') {
        viewModel.languages.push(viewModel.languageToAdd());
        viewModel.languageToAdd('');
    }
};
viewModel.addTopic = function () {
    if (viewModel.topicToAdd() != '') {
        viewModel.favoriteTopics.push(viewModel.topicToAdd());
        viewModel.topicToAdd('');
    }
};
viewModel.addSpeaker = function () {
    $.ajax({
        url: "/speakers/create/",
        type: 'post',
        data: ko.toJSON(this),
        contentType: 'application/json'
    });
};
ko.applyBindings(viewModel);

obtrusive.html

<button type="submit" data-bind="enable: languageToAdd().length > 0, click: addLanguage">Add</button>

onclick.html

<button type="submit" onclick="addLanguage()">Add</button>