Gists for knockout.unobtrusive post

createBindings.js

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

createSpeaker.html

<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>

knockout.unobtrusive.coffee

###
Knockout.Unobtrusive v0.1

Copyright (C)2011 Brandon Satrom, Carrot Pants Studios
Distributed Under MIT License

Documentation and Full license Available at:
http://github.com/bsatrom/knockout.unobtrusive

----------------------------
Knockout.Unobtrusive
----------------------------
###
ko.unobtrusive = {
  createBindings: (bindings) ->
    if not bindings
      bindings = ko.unobtrusive.bindings
      
    getElement = (id) ->
      el = document.getElementById(id) or document.getElementsByName(id)[0]
      
      if not el
        id = id.charAt(0).toUpperCase() + id.slice 1
        el = document.getElementById id
    
      return el
    
    setElementBinding = (id, value) ->
      el = getElement id;
      if el
        existing = el.getAttribute "data-bind"
        
        if existing
          value = "#{existing}, #{value}"
          
        el.setAttribute "data-bind", value
    
    createElementBinding = (element, koBinding) ->
      if typeof element is "object"
        for own key, value of element
          setElementBinding key, "#{koBinding}: #{element[key]}"
      else
        if koBinding.indexOf(":") > 0
          setElementBinding element, koBinding
        else
          setElementBinding element, "#{koBinding}: #{element}"
    
    for own valueKey, value of bindings.value
      createElementBinding bindings.value[valueKey], "value"
      
    for own textKey, value of bindings.text
      createElementBinding bindings.text[textKey], "text"
      
    for own optionsKey, value of bindings.options
      createElementBinding bindings.options[optionsKey], "options" 
    
    for own checkedKey, value of bindings.checked
      createElementBinding bindings.checked[checkedKey], "checked"
    
    for own customKey, value of bindings.custom
      createElementBinding customKey, bindings.custom[customKey]
}

ko.unobtrusive.bindings = {
  value: []
  text: []
  options: []
  checked: []
  custom: {}
}

koBindings.js

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}'
    }
};

scripts.html

<script src="knockout-1.2.1.js"></script>
<script src="knockout.unobtrusive.js"></script>