Model Factory in backbone.js

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<link rel="stylesheet" href="test.css">


<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<input type="text" class="testsize"></input>
</body>
</html>

CSS

.testsize {
 width: 200px;
}

#input {
 broder: 1px;
 align: right;
}

JavaScript

// Generates a simple read-only view system based on Flex data
var FlexReadOnlyFormViewFactory = (function(flexFieldTemplate) {
  function createFieldView(item, model, fields, zones) {
    var fieldName = item.field;
    var field = fields[fieldName];
    var zone = zones[fieldName]; // Locate matching zone
    return new FlexReadOnlyFieldView({ model: model, field: field, zone: zone, template: flexFieldTemplate });
  }
  
  function createLayoutView(layoutObj, model, fields, zones) {
    var viewPredicate = function(dataFunc) { return layoutObj.p(dataFunc(layoutObj.condition.field)); };
    return new FlexReadOnlyLayoutView({
      model: model,
      views: _.map(layoutObj.layout, function(fieldName) { return createView(fieldName, model, fields, zones); }),
      condition: layoutObj.condition ? viewPredicate : null
    });
  }
  
  function createView(item, model, fields, zones) {
    if(_.has(item, 'layout')) {
      return createLayoutView(item, model, fields, zones);
    } else {
      return createFieldView(item, model, fields, zones);
    }
  }

  return {
    createView: function(dataModel, layout, fields, zones) {
      return createLayoutView({layout: layout}, dataModel, fields, zones);
    }
  };
});