CFS yay!

by donabrams

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script id="textField" type="underscore_template">
    <label class="label"><% if (obj.label) { %><%= label %><% } else { %><%= name %><% } %></label>
    <input name="<%= name %>" class="value editable" 
        <% if (obj.modelType.size) { %>
            maxlength="<%=modelType.size%>" size="<%=modelType.size%>"
        <% } %>
        >
    <span class="translate">Blah blah</span>
</script>
<script id="selectField" type="underscore_template">
    <label class="label"><% if (obj.label) { %><%= label %><% } else { %><%= name %><% } %></label>
    <select name="<%= name %>" class="value">
        <option value="">---</option>
        <option value="">ITWD</option>
    </select>
</script>
<script id="dependentField" type="underscore_template">
    <span class="label"><% if (obj.label) { %><%= label %><% } else { %><%= name %><% } %></span>
    <input class="value readonly" name="<%= name %>"
        <% if (obj.modelType.size) { %>
            size="<%=modelType.size%>"
        <% } %>
        disabled="disabled" placeholder="---">
</script>
<script id="fieldList" type="underscore_template">
    <ul class="fieldList"><% _.each(fields, function(field) { %>
        <li class="model-<%= field.name%>">
           <%= test.templates[field.modelType.type + 'Field'](field) %> 
        </li>
    <% }); %></ul>
</script>
<script id="coaStyleTemplate" type="underscore_template">
.<%= styleClass %> html{color:#000;background:#FFF}.<%= styleClass %> body,.<%= styleClass %> div,.<%= styleClass %> dl,.<%= styleClass %> dt,.<%= styleClass %> dd,.<%= styleClass %> ul,.<%= styleClass %> ol,.<%= styleClass %> li,.<%= styleClass %> h1,.<%= styleClass %> h2,.<%= styleClass %> h3,.<%= styleClass %> h4,.<%= styleClass %> h5,.<%= styleClass %> h6,.<%= styleClass %> pre,.<%= styleClass %> code,.<%= styleClass %> form,.<%= styleClass %> fieldset,.<%= styleClass %> legend,.<%= styleClass %> input,.<%=...

CSS

label {
    display:block;
    font-weight: 700;
    margin-top: .5em;
    border: 
}
label:after {
    content: ":";
}
body {
  background-color: #FFC;
}

JavaScript

// The templates in this tester are stored in scripts for now.
// Later they should be fetched!

var test = window.test = window.test || {};
test.templates = test.templates || {};
$("script[type=underscore_template]").each(function() {
  var $this = $(this);
  test.templates[$this.attr("id")] = _.template($this.html());
});
var templates = test.templates;

// load css
var style = $("style#coaStyles");
if (style.length == 0) {
    style = $('<style id="coaStyles"></style>');
    $("head").append(style);
}
style.html(
    templates.coaStyleTemplate({styleClass:"coaWidget"}));

var coaFields = [
    { "name" : "nickname",
      "label": "NICKNAME",
      "modelType": { 
        "type": "select",
        "source": "/nicknames/all"
      }
    },
    { "name" : "speedtype",
      "label": "SPEEDTYPE",
      "modelType": {
        "type": "text",
        "size" : 10,
        "validators": [
          "isSpeedtypeFormat()",
          "/validate/speedtype/${value}"
        ]
      },
      "translate": "/xlat/speedtype/${value}"
    },
    { "name" : "fund",
      "label": "FUND",
      "modelType": {
        "type": "text",
        "size" : 5,
        "validator": "/validate/fund/${value}"
      },
      "translate": "/xlat/fund/${value}"
    },
    { "name" : "purpose",
      "label": "PURPOSE",
      "modelType": {
        "type": "text",
        "size" : 10,
        "validator": "/validate/purpose/${value}"
      },
      "translate": "/xlat/purpose/${value}"
    },
    { "name" : "deptid",
      "label": "DEPARTMENT",
      "modelType": {
        "type": "text",
        "size" : 6,
        "validator": "/validate/deptid/${value}"
      },
      "translate": "/xlat/deptid/${value}"
    },
    { "name" : "program",
      "label": "PROGRAM",
      "modelType": {
        "type": "text",
        "size" : 5,
        "validator": "/validate/program/${value}"
      },
      "translate": "/xlat/program/${value}"
    },
    { "name" : "project",
      "label": "PROJECT ID /...