Survey Designer

fiddle.css

ul {
  list-style: disc;
  margin: 10px;
  padding-left: 10px;    
}​

fiddle.html

 <div id='questions'></div>

 <script type='text/template' id="question-template">
    {{defaultText}}
    <ul></ul>
 </script>
​

fiddle.js

// customizations
// http://derickbailey.github.com/backbone.marionette/#backbone-marionette-renderer/caching-pre-compiled-templates
Backbone.Marionette.TemplateCache.loadTemplate = function(template, callback){
  // pre-compile the template and store that in the cache.
  var compiledTemplate = Handlebars.compile($(template).html());
  callback.call(this, compiledTemplate);
};

Backbone.Marionette.Renderer.renderTemplate = function(template, data){
  // because `template` is the pre-compiled template object,
  // we only need to execute the template with the data
  return template(data);
}

// MODELS
var QuestionTreeNode = Backbone.Model.extend({
    initialize: function(){
        var questions = this.get("questions");
        if (questions){
            this.questions = new QuestionTreeNodeCollection(questions);
            this.unset("questions");
        }
    }        
});

// COLLECTIONS
var QuestionTreeNodeCollection = Backbone.Collection.extend({
    model: QuestionTreeNode
});

// VIEWS

// The recursive tree view
var QuestionTreeView = Backbone.Marionette.CompositeView.extend({
    template: "#question-template",
    tagName: "li",
    initialize: function(){
        // grab the child collection from the parent model
        // so that we can render the collection as children
        // of this parent node
        this.collection = this.model.questions;
    },
    appendHtml: function(cv, iv){
        // ensure we nest the child list inside of 
        // the current list item
        cv.$("ul:first").append(iv.el);
    },
    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("ul:first").remove();
        }
    }
});

// The tree's root: a simple collection view that renders 
// a recursive tree structure for each item in the collection
var QuestionTreeRoot = Backbone.Marionette.CollectionView.extend({
    
    questionIdx: null,
    tagName: 'ul',
    itemView: QuestionTreeView,
    onRender: function() {
        this.$el.sortable({
            items: 'li',
            placeholder: 'ui-state-hover'            
        });
    },
    events: {
        'sortstart': 'markQuestionBeingSorted',
        'sortupdate': 'reorderQuestions'
    },
    markQuestionBeingSorted: function(event, ui){
        this.questionIdx = ui.item.index();
    },
    reorderQuestions: function(event, ui) {
        console.log('from ' + this.questionIdx + ' to ' + ui.item.index());            
    }
});

var questions = [
    { id: 1001, defaultText: 'What is your name?' },
    { id: 1002, defaultText: 'What is your quest?' },
    { id: 1003, defaultText: 'What are your favorite colors?', questions: [
         { id: 1004, defaultText: 'On Monday?' },
         { id: 1005, defaultText: 'On Tuesday?' },
         { id: 1006, defaultText: 'On Wednesday?' },
         { id: 1007, defaultText: 'On Thursday?' },
         { id: 1008, defaultText: 'On Friday?' }    
     ]},
    { id: 1009, defaultText: 'How did you like this survey?' }
];

var questionTree = new QuestionTreeNodeCollection(questions);
var questionTreeView = new QuestionTreeRoot({
    collection: questionTree
});

questionTreeView.render();
$("#questions").html(questionTreeView .el);​

fiddle.manifest

name: Survey Designer
description: A **throwaway** proof of concept for the Survey Designer
authors:
  - Tony Hanberg
  - Chris Hoffman
resources:
  - http://requirejs.org/docs/release/1.0.8/minified/require.js
  - http://documentcloud.github.com/underscore/underscore-min.js
  - http://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js
  - http://documentcloud.github.com/backbone/backbone.js
  - http://raw.github.com/derickbailey/backbone.marionette/master/src/backbone.marionette.js
normalize_css: no

Doesn't work... the resources are not being included in order...