Hemingway Prototype (master)
by chicagogrooves
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div id="foo">
<h2 id="title">Comment Card</span>
<div id="questions">
</div>
</div>
<template name="question-renderer-textbox">
<label>{{prompt}}</label>
<input type="text" id="{{qid}}" name="{{qid}}"/>
</template>
<template name="question-renderer-textarea">
<label>{{prompt}}</label>
<textarea id="{{qid}}" name="{{qid}}"></textarea>
</template>
JavaScript
/* global document */
define("cc-context", [], function(){
return function(){
this.referer = document.location.href;
this.tealeafId = "jasmine";
};
});
define('question-set', [], function() {
return [
{qid: 1, qtype: 'text', prompt: 'Overall rating' },
{qid: 2, qtype: 'textarea', prompt: 'Your comment' },
{qid: 3, qtype: 'text', prompt: 'Other question' }
];
});
define("cc-server", ["question-set"], function(questions) {
return {
getQuestions: function(context) {
//TODO choose which questions based on the context
return questions;
}
};
});
/* global Handlebars */
define("question-renderer-textbox", [], function(){
return function(container, q){
var template = Handlebars.compile( $("template[name=question-renderer-textbox]").html() );
container.append(template(q));
return container;
};
});
/* global Handlebars */
define("question-renderer-textarea", [], function(){
return function(container, q){
var template = Handlebars.compile( $("template[name=question-renderer-textarea]").html() );
container.append(template(q));
return container;
};
});
define("question-renderer",
["question-renderer-textbox",
"question-renderer-textarea"], function(textboxRenderer, textboxAreaRenderer){
return function(q){
var subRenderer, node=$("<li/>");
if(q.qtype === "text"){
subRenderer = textboxRenderer;
}else if (q.qtype === "textarea"){
subRenderer = textboxAreaRenderer;
}
subRenderer(node, q);
return node;
};
});
define("card-renderer", ["question-renderer"], function(renderQuestion){
return {
render: function(questions){
var form = $("<form/>");
var list = $("<ol/>");
$.each(questions, function(){
list.append( renderQuestion(this) );
});
...