<!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>