JOM (JSON Object Model)

Why jom? it just sounds good.

Objective:

This is an experimental front-end tool, which will help speed up dev work-flow by achieving the following:

• [x] Automation of collection/data binding (JSON data)
• [x] Automation of template binding
• [x] JavaScript and CSS Encapsulation (as much as possible)
• [x] Modularizing and breaking down front-end to components
• [x] Maintain data structures (optional JSON schema )
• [x] Eradicating the use of forms in front-end Eradication of Forms
• [x] Better Asset Manager (also read more...) Asset Manager
• [ ] Communicate with the server with the same data structure data structure

Note: Asset Manager helps to keep a consistent way to load assets on to the page

By creating modules, they can be reused through out the website, this helps to organise your files better as well as share the component with others.

A good example would be a date-picker, color-picker, or tabs and many more UI tools you can think of.

TODO:

• [ ] Documentation
• [ ] Communicate with the server with the same data structure data structure

Dependencies:

• jQuery: http://jquery.com/
• Web Components: https://github.com/webcomponents/webcomponentsjs
• jjv : https://github.com/acornejo/jjv (optional unless json schema is used)

Downloading:

Will add later

Getting started:

  //- index.jade

  head
    //- Load JOM itself
    script(type="text/javascript" src="jom.min.js")

    //- load assets (order is not relevent)
    link(rel="asset" source="data.json" type="text/template" name="my_template")
    link(rel="asset" source="data.json" type="text/json" name="my_collection")
  body
    //- use the new component
    component(template="my_template" collection="my_collection" path="[0]")




  //- /template.jade
  template(name="my_template")
    style.
      div[body]{background: white; padding: 20px;}
      span{padding-right: 20px;display: inline-block; width: 100px;}
      div{margin-bottom: 10px;}
    div(body)
      h1 View
      div
        span Firstname:
        span ${name.first}
      div
        span Lastname:
        span ${name.last}
      div
        span Location
        span ${location}
      br
      hr
      br
      h1 Edit
      div
        span Change name:
        input.first(type="text" value="${name.first}")
        input.last(type="text" value="${name.last}")
      div
        span Location:
        input.location(type="text" value="${location}")
    script.
      $(body)
      .on('change keyup',".location", function(event){
        data.location = $(this).val()
      })
      .on('change keyup',".first", function(event){
        data.name.first = $(this).val()
      })
      .on('change keyup',".last", function(event){
        data.name.last = $(this).val()
      })
      ;

//- data.json
[
  {
    "name":{
      "first"    : "Valtid",
      "last"     : "Caushi"
    },
    "location" : "London"
  },
  {
    "name":{
      "first"    : "John",
      "last"     : "Doe"
    },
    "location" : "New York"
  }
]