Edit in JSFiddle 

var viewModel = {
    id: '',
    name: ko.observable(''),
    bio: ko.observable(''),
    twitterHandle: ko.observable(''),
    state: ko.observable(''),
    photoUrl: ko.observable(''),
    languages: ko.observableArray([]),
    averageRating: ko.observable(''),
    languageToAdd: ko.observable(''),
    presentedBefore: ko.observable(true)
};
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',
        success: function(result) {
            alert(result);
        }
    });
};

var bindings = {
    value: [ 'languageToAdd', 'name', 'bio', 'twitterHandle', 'state', 'photoUrl' ],
    text: [ { displayName: 'name' }, { displayState: 'state' }, { displayBio: 'bio' }, { displayTwitterHandle: 'twitterHandle' }, { languageList: 'languages' }, { displayPresentedBefore: 'presentedBefore' } ],
    options: [ 'languages', 'favoriteTopics' ],
    checked: [ 'presentedBefore' ],
    custom: {
        languageToAdd: 'valueUpdate: "afterkeydown"',
        addLanguage: 'enable: languageToAdd().length > 0, click: addLanguage',
        photo: 'attr: {src: photoUrl, alt: name}',
        twitterUrl: 'attr: {href: twitterUrl}'
    }
};

ko.unobtrusive.createBindings(bindings);
ko.applyBindings(viewModel);

$('#profilePreview').hide();
$('input[type=text]').blur(function () {
    $('#profilePreview').show();
});
$('#profilePreview').draggable();
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Create</title>
        <meta name="author" content="Brandon Satrom" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />     
    </head>
    <body>
        <div id="site-wrapper">          
            For a full writeup of this example, <a href="http://userinexperience.com/?p=633">click here</a>
            <h2>Create a Speaker</h2>
            <form data-bind="submit: addSpeaker">
                <fieldset>
                    <legend>Speaker Info</legend>
                    Name: <input type="text" id="name" /> <br />                                                       
                    Bio: <input type="text" id="bio" /> <br />
                    Twitter Handle: <input id="twitterHandle" type="text" /> <br />
                    Photo Url: <input id="photoUrl" type="text" /> <br />
                    Presented Before: <input type="checkbox" name="presentedBefore" />                    
                </fieldset>
                <fieldset>
                    <legend>Favorite Languages</legend>
                    New item:
                    <input type="text" id="languageToAdd" />
                    <button type="submit" id="addLanguage">Add</button>
                    <p>Your choices:</p>
                    <select multiple="multiple" width="50" id="languages"> </select>
                </fieldset>
                <input type="submit" value="Create Speaker" />
                <!-- Profile Preview -->
                <article id="profilePreview">
                    <header>
                        <div><img id="image" /></div>
                        <div>
                            <h1>
                                <span id="displayName"></span> :: 
                                <a id="twitterUrl">
                                    @<span id="displayTwitterHandle"></span>
                                </a>
                            </h1>
                        </div>
                        <div class="subhead">Programs in <span id="languageList"></span></div>
                    </header>
                    <div id="bio">
                        <span id="displayBio"></span><br/> Has presented before? <span id="displayPresentedBefore"></span>
                    </div>
                </article>
            </form>
        </div>
    </body>
</html>

External resources loaded into this fiddle: