Bootstrap form example

by JoshGough

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://raw.github.com/versionone/VersionOne.Requestor.NET/master/VersionOne.Requestor.NET.Backbone/Scripts/backbone-v1.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<html>
    <head>
        <title>VersionOne MetaMorformizr User Story Editor</title>
    </head>
    <body>
            <h1>VersionOne MetaMorformizr User Story Editor</h1>
An intermediate / advanced example of using the VersionOne HTTP API with
        the open source jQuery, Backbone, and Backbone Forms libraries.
        <br/>
        <br/>This example uses all three core VersionOne APIs: Meta, Localization,
        and Data.
        <a href="http://community.versionone.com/sdk/documentation/coreapi.aspx"
        target="_blank">Learn more here about the APIs</a>.
        <br/>
        <br/>
        <div style='border: 1px solid darkgray;padding:5px;background:linen'>
             <h3>Instructions</h3>

            <ol>
                <li>1: Click <code>Load Story</code>

                    <br/>
                    <blockquote><i><span>Result</span>: Story details should load with values for the attributes selected in the <code>Which attributes?</code> list</i>
                    </blockquote>
                </li>
                <li>2: Modify the story and click <code>Save Story</code>

                    <br/>
                    <blockquote><i><span>Result</span>: Story will be saved...

CSS

body {
    padding: 5px;
    font-family: sans-serif;
}
#editor {
    padding: 10px;
    border: 1px solid darkblue;
    background: whitesmoke;
    display: none;
    margin-bottom: 15px;
}
label { color: darkblue }
textarea { height: 100px }
#message {
    font-weight: bold;
    color: darkgreen;
}
/* From Backbone Forms github site */
/* Date */
.bbf-date .bbf-date { width: 4em }
.bbf-date .bbf-month { width: 9em }
.bbf-date .bbf-year { width: 5em }
/* DateTime */
.bbf-datetime select { width: 4em }
/* List */
.bbf-list .bbf-add,
.bbf-load { margin-top: -10px }
.bbf-list li { margin-bottom: 5px }
.bbf-list .bbf-del { margin-left: 4px }
/* List.Modal */
.bbf-list-modal {
    cursor: pointer;
    border: 1px solid #ccc;
    width: 208px;
    border-radius: 3px;
    padding: 4px;
    color: #555;
}
/* Custom */
#spinner,
#saveSpinner { display: none }
blockquote {
    font-size: 75%;
    font-weight: bold;
}
blockquote code {
    font-size: 75%;
    background: beige;
}
blockquote span { color: darkgreen }
.editorDiv {
    margin-top: 10px;
    padding: 10px;
    border: 2px solid darkgray;
}

CoffeeScript

readQueryString = (key) ->
  "Name,Description,Estimate"
 
Backbone.emulateHTTP = true
siteRoot = "http://eval.versionone.net/platformtest/"
urlRoot = siteRoot + "rest-1.v1/Data/Story/"
metaUrl = siteRoot + "meta.v1/Story?accept=application/json"
l10nUrl = siteRoot + "loc.v1"

v1AtttributeTypeToBackboneFormsFieldMap =
  LongText:
    type: "TextArea"
  Text:
    type: "Text"
  Numeric:
    type: "Number"

headers =
  Authorization: "Basic " + btoa("admin:admin")
  Accept: "haljson"
    
formSchema = {}
form = null
storyModel = Backbone.Model.extend(
  urlRoot: urlRoot
  url: ->
    return @urlRoot + @id  unless @isNew()
    @urlRoot + @id + "?sel=" + _.keys(formSchema).join(",")
  save: (attributes, options) ->
    options or (options =
      contentType: "haljson"
      patch: true
      headers: headers
    )
    Backbone.Model::save.call this, attributes, options
  fetch: (options) ->
    options or (options =
      dataType: "json"
      headers: headers
    )
    Backbone.Model::fetch.call this, options
)
model = new storyModel

loadMeta = (callback) ->
  formSchema = {}
  attributes = getSelectedAttributesNames()
  $.ajax(metaUrl).done (data) ->
    titleRequests = []
    attributeNames = _.map(attributes, (fieldName) ->
      "Story." + fieldName
    )
    attribs = _.pick(data.Attributes, attributeNames)
    _.each attribs, (item, index) ->
      field = {}
      mixThemInProps = v1AtttributeTypeToBackboneFormsFieldMap[item.AttributeType]
      _.extend field, mixThemInProps
      isRequired = item.IsRequired
      if isRequired
        field.validators = [] unless field.validators
        field.validators.push "required"
      formSchema[item.Name] = field
      titleRequest = ->
        formField = field
        $.ajax(l10nUrl + "?" + item.DisplayName).done (data) ->
          formField.title = data
      titleRequests.push titleRequest
    $.when.apply(null, titleRequests).done ->
      callback()

createForm = (model) ->
  settings = schema:...