1. <!doctype html>
  2.  
  3. <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
  4. <!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
  5. <!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
  6. <!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
  7. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
  8.   <head>
  9.     <meta charset="utf-8">
  10.  
  11.     <title>Customiser</title>
  12.     <meta name="author" content="Cognitive Edge">
  13.  
  14.     <link rel="stylesheet/less" type="text/css" href="/css/screen.less">
  15.     <link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.14.custom.css">
  16.  
  17.     <script type="text/javascript" src="http://use.typekit.com/bel3nha.js"></script>
  18.     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  19.     <script src="/js/vendor/modernizr.all.min.js"></script>
  20.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  21.  
  22.     <script src="/js/vendor/jquery-ui-1.8.14.custom.min.js"></script>
  23.     <script src="/js/vendor/json2.js"></script>
  24.     <script src="/js/vendor/underscore.js"></script>
  25.     <script src="/js/vendor/backbone.js"></script>
  26.     <script src="/js/vendor/less-1.1.3.min.js"></script>
  27.     <script src="/js/vendor/jquery.tmpl.js"></script>
  28.     <script src="/js/vendor/jsonselect.js"></script>
  29.     <script src="/js/vendor/jquery.qtip.min.js"></script>
  30.     <script src="/js/vendor/backbone.modelbinding.js"></script>
  31.     <script src="/js/vendor/backbone.localStorage.js"></script>
  32.    
  33.  
  34.    
  35.  </head>
  36.  <body>
  37.  
  38.     <div id="main"></div>
  39.  
  40.  </body>
  41.  
  42. <script id="attribute-tmpl" type="text/x-jquery-tmpl">
  43. <h3><%= id %></h3>
  44. <label for="allowNA">allowNA</label>
  45. <input name="allowNA" type="text" value="<%= allowNA %>"/>
  46. </script>
  47.  
  48. <script id="section-tmpl" type="text/x-jquery-tmpl">
  49. <h3><%= id %></h3>
  50. </script>
  51.  
  52.  
  53. <script>
  54.  
  55.  
  56. (function () {
  57.    
  58. //The below vars are only for namespacing resons only.
  59.  
  60. SCC = {};
  61. SCC.Models = {};
  62. SCC.Views = {};
  63. SCC.Collections = {};
  64.  
  65. /*
  66.  
  67. Initial Data
  68.  
  69. */
  70.  
  71. window.SectionData = [{
  72.     "id": "tellAnotherPage",
  73.     "xattributes":[{
  74.         "id": "42e227b6-newe-495c-b97a-71c0eb610844",
  75.         "type": "FreeText",
  76.         "allowNA": "true",
  77.         "minAnswers": "1",
  78.         "maxAnswers": "1",
  79.         "name": "Ghost Monkey",
  80.         "title": "Ghost Monkey",
  81.         "promptText": "prompt Ghost Monkey",
  82.         "helpText": "Help Ghost Monkey",
  83.         "Anchors": [{
  84.             "item": "Process",
  85.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  86.         },
  87.         {
  88.             "item": "Personality",
  89.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  90.         },
  91.         {
  92.             "item": "Speed/Response",
  93.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  94.         }]
  95.     },
  96.     {
  97.         "id": "42e227b6-newe-495c-b97a-tr65436543",
  98.         "type": "Another",
  99.         "allowNA": "false",
  100.         "minAnswers": "1",
  101.         "maxAnswers": "1",
  102.         "name": "John Who",
  103.         "title": "Johnny Who",
  104.         "promptText": "prompt John Who",
  105.         "helpText": "Help John",
  106.         "parameters": [{
  107.             "parameter": "1",
  108.             "name": "stepValue"
  109.         },
  110.         {
  111.             "parameter": "1",
  112.             "name": "startValue"
  113.         },
  114.         {
  115.             "parameter": "10",
  116.             "name": "countValue"
  117.         }]
  118.     }]
  119. },
  120. {
  121.     "id": "section2",
  122.     "xattributes":[{
  123.         "id": "42e227b6-newe-495c-b97a-71c0eb610844",
  124.         "type": "FreeText",
  125.         "allowNA": "true",
  126.         "minAnswers": "1",
  127.         "maxAnswers": "1",
  128.         "name": "Ghost Monkey",
  129.         "title": "Ghost Monkey",
  130.         "promptText": "prompt Ghost Monkey",
  131.         "helpText": "Help Ghost Monkey",
  132.         "Anchors": [{
  133.             "item": "Process",
  134.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  135.         },
  136.         {
  137.             "item": "Personality",
  138.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  139.         },
  140.         {
  141.             "item": "Speed/Response",
  142.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  143.         }]
  144.     },
  145.     {
  146.         "id": "42e227b6-newe-495c-b97a-tr65436543",
  147.         "type": "Another",
  148.         "allowNA": "false",
  149.         "minAnswers": "1",
  150.         "maxAnswers": "1",
  151.         "name": "John Who",
  152.         "title": "Johnny Who",
  153.         "promptText": "prompt John Who",
  154.         "helpText": "Help John",
  155.         "parameters": [{
  156.             "parameter": "1",
  157.             "name": "stepValue"
  158.         },
  159.         {
  160.             "parameter": "1",
  161.             "name": "startValue"
  162.         },
  163.         {
  164.             "parameter": "10",
  165.             "name": "countValue"
  166.         }]
  167.     }]
  168. },
  169. {
  170.     "id": "section3",
  171.     "xattributes":[{
  172.         "id": "42e227b6-newe-495c-b97a-71c0eb610844",
  173.         "type": "FreeText",
  174.         "allowNA": "true",
  175.         "minAnswers": "1",
  176.         "maxAnswers": "1",
  177.         "name": "Ghost Monkey",
  178.         "title": "Ghost Monkey",
  179.         "promptText": "prompt Ghost Monkey",
  180.         "helpText": "Help Ghost Monkey",
  181.         "Anchors": [{
  182.             "item": "Process",
  183.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  184.         },
  185.         {
  186.             "item": "Personality",
  187.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  188.         },
  189.         {
  190.             "item": "Speed/Response",
  191.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  192.         }]
  193.     },
  194.     {
  195.         "id": "42e227b6-newe-495c-b97a-tr65436543",
  196.         "type": "Another",
  197.         "allowNA": "false",
  198.         "minAnswers": "1",
  199.         "maxAnswers": "1",
  200.         "name": "John Who",
  201.         "title": "Johnny Who",
  202.         "promptText": "prompt John Who",
  203.         "helpText": "Help John",
  204.         "parameters": [{
  205.             "parameter": "1",
  206.             "name": "stepValue"
  207.         },
  208.         {
  209.             "parameter": "1",
  210.             "name": "startValue"
  211.         },
  212.         {
  213.             "parameter": "10",
  214.             "name": "countValue"
  215.         }]
  216.     }]
  217. },
  218. {
  219.     "id": "finishPage",
  220.     "xattributes":[{
  221.         "id": "42e227b6-newe-495c-b97a-71c0eb610844",
  222.         "type": "FreeText",
  223.         "allowNA": "true",
  224.         "minAnswers": "1",
  225.         "maxAnswers": "1",
  226.         "name": "Ghost Monkey",
  227.         "title": "Ghost Monkey",
  228.         "promptText": "prompt Ghost Monkey",
  229.         "helpText": "Help Ghost Monkey",
  230.         "Anchors": [{
  231.             "item": "Process",
  232.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  233.         },
  234.         {
  235.             "item": "Personality",
  236.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  237.         },
  238.         {
  239.             "item": "Speed/Response",
  240.             "id": "42e226b6-newe-495c-b97a-71c0eb610841"
  241.         }]
  242.     },
  243.     {
  244.         "id": "42e227b6-newe-495c-b97a-tr65436543",
  245.         "type": "Another",
  246.         "allowNA": "false",
  247.         "minAnswers": "1",
  248.         "maxAnswers": "1",
  249.         "name": "John Who",
  250.         "title": "Johnny Who",
  251.         "promptText": "prompt John Who",
  252.         "helpText": "Help John",
  253.         "parameters": [{
  254.             "parameter": "1",
  255.             "name": "stepValue"
  256.         },
  257.         {
  258.             "parameter": "1",
  259.             "name": "startValue"
  260.         },
  261.         {
  262.             "parameter": "10",
  263.             "name": "countValue"
  264.         }]
  265.     }]
  266. }];
  267.  
  268. /*
  269.  
  270. Models
  271.  
  272. */
  273.  
  274. SCC.Models.Attribute = Backbone.Model.extend({});
  275.  
  276. SCC.Collections.Attributes = Backbone.Collection.extend({
  277.     model: SCC.Models.Attribute,
  278.     localStorage: new Store("attributes")
  279. });
  280.  
  281. SCC.Models.Section = Backbone.Model.extend({
  282.     initialize: function() {
  283.         var attributes = this.get('xattributes');
  284.         this.xattributes = new SCC.Collections.Attributes(attributes);
  285.         delete this.attributes.xattributes;
  286.         this.xattributes.parent = this;
  287.         //console.log(this.attributes.xattributes);
  288.     },
  289.     toJSON: function() {
  290.         var json = Backbone.Model.prototype.toJSON.call(this);
  291.         json.xattributes = this.xattributes.toJSON();
  292.         return json;
  293.     }
  294.    
  295. });
  296. /*
  297.  
  298. Collections
  299.  
  300. */
  301.  
  302. SCC.Collections.Sections = Backbone.Collection.extend({
  303.     model: SCC.Models.Section,
  304.     localStorage: new Store("sections")
  305. });
  306.  
  307.  
  308.  
  309.  
  310.    
  311. /*
  312.  
  313. VIEWS
  314.  
  315. */
  316.  
  317. SCC.Views.AttributeView = Backbone.View.extend({
  318.     tagName: "div",
  319.     className: "attribute",
  320.     events : {
  321.             "change input" :"changed",
  322.             "change select" :"changed"
  323.     },
  324.     initialize: function(){
  325.         _.bindAll(this, 'render');
  326.         this.model.bind('change', this.render);
  327.         this.template = _.template($('#attribute-tmpl').html());   
  328.     },
  329.    
  330.     render: function() {
  331.         $(this.el).html(this.template(this.model.toJSON()));
  332.         return this;
  333.     },
  334.     changed:function(evt) {
  335.            var changed = evt.currentTarget;
  336.            var value = $(changed).val();
  337.            var obj = "{\""+changed.name +"\":\""+value+"\"}";
  338.            var objInst = JSON.parse(obj);
  339.            this.model.set(objInst);            
  340.         }
  341.    
  342. });
  343.  
  344.  
  345.  
  346. SCC.Views.SectionView = Backbone.View.extend({
  347.     tagName: "div",
  348.     className: "section",
  349.     initialize: function(){
  350.         _.bindAll(this, 'render');
  351.         this.template = _.template($('#section-tmpl').html());
  352.     },
  353.     render: function() {
  354.         console.log($(this.el));
  355.         $(this.el).html(this.template(this.model.toJSON()));
  356.         return this;
  357.     }
  358. });
  359.  
  360.  
  361.  
  362. SCC.Views.SectionsView = Backbone.View.extend({
  363.     tagName: "div",
  364.     id: "sections",
  365.     className: "sections",
  366.     initialize: function(){
  367.         _.bindAll(this, 'render');
  368.          //SCC.Sections.bind('add',   this.addOne, this);
  369.          SCC.Sections.bind('reset', this.addAll, this);
  370.          SCC.Sections.bind('all',   this.render, this);
  371.     },
  372.     render: function() {
  373.         $(this.el).html("<p>rendered</p>");
  374.         return this;
  375.     },
  376.     addOne: function(section) {
  377.         var view = new SCC.Views.SectionView({model: section});
  378.         $(this.el).append(view.render().el);
  379.     },
  380.     addAll: function() {
  381.         this.collection.each(this.addOne);
  382.     }
  383.    
  384. });
  385.  
  386.  
  387.  
  388. SCC.Sections = new SCC.Collections.Sections();
  389. SCC.SectionsView = new SCC.Views.SectionsView({collection:SCC.Sections});
  390. SCC.Sections.reset(window.SectionData);
  391. $('#main').append(SCC.SectionsView.render().el);
  392.  
  393. }());
  394. </script>
  395.  <script src="/js/app2.js"></script>
  396. </html>