node.js MVVM framework concept

Not sure how subjective this question is however I am looking for a peer review and general feedback on the intuitiveness and scaffolding potential of a framework concept. I have a gist on GitHub here: node.js MVVM framework concept

Is this more or less intuitive then using pseudo code and a template engine, such as handlebars, for rendering html?

The markup module will use three objects, the first being out design object:

var welcomeDesign = [{
  handle:'pageTitle'
  tag:'h1',
  attr:{
    class:'mainHeading'
  }
},{
  tag:'p',
  handle:'welcomeParagraph',
  content:[{
    content:'Welcome!',
    handle:'welcomeContent'
  },{
    tag:'img'
    handle:'welcomeBanner'
  }]
}];

The second object is our data:

var data = [{
  published:'11-8-13',
  title:'Hello World',
  content:'Welcome to...'
  assets:[{
    type:'img',
    path:'/images/'
    name:'cat.jpg'
  }]
}];

The third will be our mapping logic:

var imageAsset = {
    attr:{
      src:{
        key:'assets',
        map:function(obj, values){
          return values[0].path + values[0].name
        }
      }
    }
};

var welcome = {
  pageTitle:{
    content: {
      key:['published','title']
      map: function(object, values){
        return values[0] + ': ' + values[1];
      }
    }
  },
  welcomeContent:{
    content:{
      key:'content'
    }
  },
  welcomeBanner:imageAsset
};

and finally the methods for bringing them together:

var markup = require('markup'); //our module

var welcomeMessage = markup.design(welcomeDesign); //create a design instance

var homeWelcome = new welcomeMessage(data); //instantiate with our data
homeWelcome.render(welcome); //render with our logic

It's better than rendering HTML in some other language manually, but it's at a disadvantage to HTML super-set template languages.

Mirroring the structure of HTML in JS makes the design more verbose because you need to map object fields to HTML tokens like attr: and not tangibly better than HTML that's parameterized with jQuery. Mistakes in such a scheme, while not as bad as rendering HTML directly, are easier to make and harder to find than writing straight HTML or a super-set thereof because no IDE is going to understand how the JS object maps to an HTML snippet to validate it. Most HTML super-set template languages have the same problem with IDEs, to be fair, but it's usually easier to see what the HTML emitted is going to look like.

Another thing I might look into refactoring is the mapping object, which is using specific attribute names. You have an abstraction in the design, handle, that could just as easily be applied to attribute names, and your mapping would not have to reference the design's HTML at all. That might be an idealistic complaint, though.

In summary, what I would rather see is roughly the same data and mapping methodology, but make the design something my IDE (and eyes) will better understand as HTML.

StackExchange Code Review Q#34098, answer score: 3