Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
- <!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
- <!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
- <!--[if IE 9]> <html lang="en" class="no-js ie9"> <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <title>Customiser</title>
- <meta name="author" content="Cognitive Edge">
- <link rel="stylesheet/less" type="text/css" href="/css/screen.less">
- <link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.14.custom.css">
- <script type="text/javascript" src="http://use.typekit.com/bel3nha.js"></script>
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
- <script src="/js/vendor/modernizr.all.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
- <script src="/js/vendor/jquery-ui-1.8.14.custom.min.js"></script>
- <script src="/js/vendor/json2.js"></script>
- <script src="/js/vendor/underscore.js"></script>
- <script src="/js/vendor/backbone.js"></script>
- <script src="/js/vendor/less-1.1.3.min.js"></script>
- <script src="/js/vendor/jquery.tmpl.js"></script>
- <script src="/js/vendor/jsonselect.js"></script>
- <script src="/js/vendor/jquery.qtip.min.js"></script>
- <script src="/js/vendor/backbone.modelbinding.js"></script>
- <script src="/js/vendor/backbone.localStorage.js"></script>
- </head>
- <body>
- <div id="main"></div>
- </body>
- <script id="attribute-tmpl" type="text/x-jquery-tmpl">
- <h3><%= id %></h3>
- <label for="allowNA">allowNA</label>
- <input name="allowNA" type="text" value="<%= allowNA %>"/>
- </script>
- <script id="section-tmpl" type="text/x-jquery-tmpl">
- <h3><%= id %></h3>
- </script>
- <script>
- (function () {
- //The below vars are only for namespacing resons only.
- SCC = {};
- SCC.Models = {};
- SCC.Views = {};
- SCC.Collections = {};
- /*
- Initial Data
- */
- window.SectionData = [{
- "id": "tellAnotherPage",
- "xattributes":[{
- "id": "42e227b6-newe-495c-b97a-71c0eb610844",
- "type": "FreeText",
- "allowNA": "true",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "Ghost Monkey",
- "title": "Ghost Monkey",
- "promptText": "prompt Ghost Monkey",
- "helpText": "Help Ghost Monkey",
- "Anchors": [{
- "item": "Process",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Personality",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Speed/Response",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- }]
- },
- {
- "id": "42e227b6-newe-495c-b97a-tr65436543",
- "type": "Another",
- "allowNA": "false",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "John Who",
- "title": "Johnny Who",
- "promptText": "prompt John Who",
- "helpText": "Help John",
- "parameters": [{
- "parameter": "1",
- "name": "stepValue"
- },
- {
- "parameter": "1",
- "name": "startValue"
- },
- {
- "parameter": "10",
- "name": "countValue"
- }]
- }]
- },
- {
- "id": "section2",
- "xattributes":[{
- "id": "42e227b6-newe-495c-b97a-71c0eb610844",
- "type": "FreeText",
- "allowNA": "true",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "Ghost Monkey",
- "title": "Ghost Monkey",
- "promptText": "prompt Ghost Monkey",
- "helpText": "Help Ghost Monkey",
- "Anchors": [{
- "item": "Process",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Personality",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Speed/Response",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- }]
- },
- {
- "id": "42e227b6-newe-495c-b97a-tr65436543",
- "type": "Another",
- "allowNA": "false",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "John Who",
- "title": "Johnny Who",
- "promptText": "prompt John Who",
- "helpText": "Help John",
- "parameters": [{
- "parameter": "1",
- "name": "stepValue"
- },
- {
- "parameter": "1",
- "name": "startValue"
- },
- {
- "parameter": "10",
- "name": "countValue"
- }]
- }]
- },
- {
- "id": "section3",
- "xattributes":[{
- "id": "42e227b6-newe-495c-b97a-71c0eb610844",
- "type": "FreeText",
- "allowNA": "true",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "Ghost Monkey",
- "title": "Ghost Monkey",
- "promptText": "prompt Ghost Monkey",
- "helpText": "Help Ghost Monkey",
- "Anchors": [{
- "item": "Process",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Personality",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Speed/Response",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- }]
- },
- {
- "id": "42e227b6-newe-495c-b97a-tr65436543",
- "type": "Another",
- "allowNA": "false",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "John Who",
- "title": "Johnny Who",
- "promptText": "prompt John Who",
- "helpText": "Help John",
- "parameters": [{
- "parameter": "1",
- "name": "stepValue"
- },
- {
- "parameter": "1",
- "name": "startValue"
- },
- {
- "parameter": "10",
- "name": "countValue"
- }]
- }]
- },
- {
- "id": "finishPage",
- "xattributes":[{
- "id": "42e227b6-newe-495c-b97a-71c0eb610844",
- "type": "FreeText",
- "allowNA": "true",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "Ghost Monkey",
- "title": "Ghost Monkey",
- "promptText": "prompt Ghost Monkey",
- "helpText": "Help Ghost Monkey",
- "Anchors": [{
- "item": "Process",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Personality",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- },
- {
- "item": "Speed/Response",
- "id": "42e226b6-newe-495c-b97a-71c0eb610841"
- }]
- },
- {
- "id": "42e227b6-newe-495c-b97a-tr65436543",
- "type": "Another",
- "allowNA": "false",
- "minAnswers": "1",
- "maxAnswers": "1",
- "name": "John Who",
- "title": "Johnny Who",
- "promptText": "prompt John Who",
- "helpText": "Help John",
- "parameters": [{
- "parameter": "1",
- "name": "stepValue"
- },
- {
- "parameter": "1",
- "name": "startValue"
- },
- {
- "parameter": "10",
- "name": "countValue"
- }]
- }]
- }];
- /*
- Models
- */
- SCC.Models.Attribute = Backbone.Model.extend({});
- SCC.Collections.Attributes = Backbone.Collection.extend({
- model: SCC.Models.Attribute,
- localStorage: new Store("attributes")
- });
- SCC.Models.Section = Backbone.Model.extend({
- initialize: function() {
- var attributes = this.get('xattributes');
- this.xattributes = new SCC.Collections.Attributes(attributes);
- delete this.attributes.xattributes;
- this.xattributes.parent = this;
- //console.log(this.attributes.xattributes);
- },
- toJSON: function() {
- var json = Backbone.Model.prototype.toJSON.call(this);
- json.xattributes = this.xattributes.toJSON();
- return json;
- }
- });
- /*
- Collections
- */
- SCC.Collections.Sections = Backbone.Collection.extend({
- model: SCC.Models.Section,
- localStorage: new Store("sections")
- });
- /*
- VIEWS
- */
- SCC.Views.AttributeView = Backbone.View.extend({
- tagName: "div",
- className: "attribute",
- events : {
- "change input" :"changed",
- "change select" :"changed"
- },
- initialize: function(){
- _.bindAll(this, 'render');
- this.model.bind('change', this.render);
- this.template = _.template($('#attribute-tmpl').html());
- },
- render: function() {
- $(this.el).html(this.template(this.model.toJSON()));
- return this;
- },
- changed:function(evt) {
- var changed = evt.currentTarget;
- var value = $(changed).val();
- var obj = "{\""+changed.name +"\":\""+value+"\"}";
- var objInst = JSON.parse(obj);
- this.model.set(objInst);
- }
- });
- SCC.Views.SectionView = Backbone.View.extend({
- tagName: "div",
- className: "section",
- initialize: function(){
- _.bindAll(this, 'render');
- this.template = _.template($('#section-tmpl').html());
- },
- render: function() {
- console.log($(this.el));
- $(this.el).html(this.template(this.model.toJSON()));
- return this;
- }
- });
- SCC.Views.SectionsView = Backbone.View.extend({
- tagName: "div",
- id: "sections",
- className: "sections",
- initialize: function(){
- _.bindAll(this, 'render');
- //SCC.Sections.bind('add', this.addOne, this);
- SCC.Sections.bind('reset', this.addAll, this);
- SCC.Sections.bind('all', this.render, this);
- },
- render: function() {
- $(this.el).html("<p>rendered</p>");
- return this;
- },
- addOne: function(section) {
- var view = new SCC.Views.SectionView({model: section});
- $(this.el).append(view.render().el);
- },
- addAll: function() {
- this.collection.each(this.addOne);
- }
- });
- SCC.Sections = new SCC.Collections.Sections();
- SCC.SectionsView = new SCC.Views.SectionsView({collection:SCC.Sections});
- SCC.Sections.reset(window.SectionData);
- $('#main').append(SCC.SectionsView.render().el);
- }());
- </script>
- <script src="/js/app2.js"></script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement