chrisekelley · June 20, 2011 12:06
diff --git a/gistfile1.html b/gistfile1.html
 <html>
  <head>
    <script id="form-template" type="text/x-handlebars-template">
      {{#formElements}}
        <tr>
          <td>
            <label for='{{id}}'>{{label}}</label>
          </td>
          <td>
            <input {{#options}}data-{{name}}='{{value}}' {{/options}} id='{{id}}' type='{{type}}'></input>
          </td>
        </tr>
      {{/formElements}}
    </script>
  </head>
  <body>
    <form>
      <table id='form-elements'>
      </table>
    </form>
  </body>
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="handlebars.js"></script>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="backbone.js"></script>
    <script type="text/javascript">
      
      var Form = Backbone.Model.extend({
        validate: function(){
          console.log("Validate called");
          var formElements = this.get("formElements");
          _.each(formElements, function(formElement, index){
            _.each(formElement["options"], function(option,index){
              var formElementValue = formElement["value"];
              var optionName = option["name"];
              var optionValue= option["value"];
              console.log(optionName);
              console.log(optionValue);
              console.log(optionValue);
 //              formElements[index]["valid"] = true;
            });
          });
 //          this.set("formElements", formElements);
        }

      });

      var FormView = Backbone.View.extend({
        initialize: function (){
          _.bindAll(this,'render');
          this.model.bind('change', this.render);
          this.model.view = this;
          this.render();
        },

        template: Handlebars.compile($("#form-template").html()),

        events: {
          "change" : "updateModel"
        },

        el: $("#form-elements"),

        render: function(){
          $(this.el).html(this.template(this.model.toJSON()));
          return this;
        },

        updateModel: function(){
          console.log("time to update model");
        }
      });

      var form = new Form();
      form.set({
        "formElements": [
          {
            "id": "A4X",
            "label": "First Name",
            "options": [
              {
                "name": "optional",
                "value": "true"
              }
            ],
            "type": "text"
          }, {
            "id": "G4R",
            "label": "Last Name",
            "options": [
              {
              "name": "optional",
              "value":  "false"
              }
            ],
            "type": "text"
          }, {
            "id": "LP3",
            "label": "Age",
            "options": [ 
              {
                "name": "absolute-max",
                "value": "130"
              }, {
                "name": "absolute-min",
                "value": "0"
              }, {
                "name": "max",
                "value": "95"
              }
            ],
            "type": "number"
          }
        ]
      });

      new FormView({
        model: form
      });
    </script>
 </html>
	<html>
	<head>
	<script id="form-template" type="text/x-handlebars-template">
	{{#formElements}}
	<tr>
	<td>
	<label for='{{id}}'>{{label}}</label>
	</td>
	<td>
	<input {{#options}}data-{{name}}='{{value}}' {{/options}} id='{{id}}' type='{{type}}'></input>
	</td>
	</tr>
	{{/formElements}}
	</script>
	</head>
	<body>
	<form>
	<table id='form-elements'>
	</table>
	</form>
	</body>
	<script type="text/javascript" src="jquery-1.5.min.js"></script>
	<script type="text/javascript" src="handlebars.js"></script>
	<script type="text/javascript" src="underscore.js"></script>
	<script type="text/javascript" src="backbone.js"></script>
	<script type="text/javascript">

	var Form = Backbone.Model.extend({
	validate: function(){
	console.log("Validate called");
	var formElements = this.get("formElements");
	_.each(formElements, function(formElement, index){
	_.each(formElement["options"], function(option,index){
	var formElementValue = formElement["value"];
	var optionName = option["name"];
	var optionValue= option["value"];
	console.log(optionName);
	console.log(optionValue);
	console.log(optionValue);
	// formElements[index]["valid"] = true;
	});
	});
	// this.set("formElements", formElements);
	}

	});

	var FormView = Backbone.View.extend({
	initialize: function (){
	_.bindAll(this,'render');
	this.model.bind('change', this.render);
	this.model.view = this;
	this.render();
	},

	template: Handlebars.compile($("#form-template").html()),

	events: {
	"change" : "updateModel"
	},

	el: $("#form-elements"),

	render: function(){
	$(this.el).html(this.template(this.model.toJSON()));
	return this;
	},

	updateModel: function(){
	console.log("time to update model");
	}
	});

	var form = new Form();
	form.set({
	"formElements": [
	{
	"id": "A4X",
	"label": "First Name",
	"options": [
	{
	"name": "optional",
	"value": "true"
	}
	],
	"type": "text"
	}, {
	"id": "G4R",
	"label": "Last Name",
	"options": [
	{
	"name": "optional",
	"value": "false"
	}
	],
	"type": "text"
	}, {
	"id": "LP3",
	"label": "Age",
	"options": [
	{
	"name": "absolute-max",
	"value": "130"
	}, {
	"name": "absolute-min",
	"value": "0"
	}, {
	"name": "max",
	"value": "95"
	}
	],
	"type": "number"
	}
	]
	});

	new FormView({
	model: form
	});
	</script>
	</html>