Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Aug 15th, 2011  |  syntax: HTML 5  |  size: 9.56 KB  |  views: 132  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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>
clone this paste RAW Paste Data