Skip to content

Instantly share code, notes, and snippets.

@k33g

k33g/gist:3033968

Created July 2, 2012 16:01
Show Gist options
  • Save k33g/3033968 to your computer and use it in GitHub Desktop.
Save k33g/3033968 to your computer and use it in GitHub Desktop.
Download ZIP
BB Scaffolding at run-time
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Backbone</title>
<link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="libs/vendors/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand">Mon Blog</a>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>Backbone rocks !!!</h1>
</div>
<div id="posts"></div>
<div id="postsGrid"></div>
</div>
</body>
<!-- === Frameworks === -->
<script src="libs/vendors/jquery-1.7.2.js"></script>
<!--<script src="libs/vendors/bootstrap/js/bootstrap.js"></script>-->
<script src="libs/vendors/underscore.js"></script>
<script src="libs/vendors/backbone.js"></script>
<!-- === code applicatif === -->
<script>
$(function (){
Backbone.Scaffold = Backbone.Model.extend({
},{
//constants
FIELD : "<input type='text' value='#{VALUE}'/>",
TEXT : "<textarea>#{VALUE}</textarea>",
LABEL : "<label>#{VALUE}</label>",
SPAN : "<span>#{VALUE}</span>",
MAIL : "<a href='mailto:#{VALUE}'>#{VALUE}</a>",
URL : "<a href='#{VALUE}'>#{VALUE}</a>", //bof
PWD : "<input type='password' value='#{VALUE}'/>",
TWITTER : "<a href='http://twitter.com/#{VALUE}'>@#{VALUE}</a>",
LINKID : "<a href='#{VALUE_ID}'>#{VALUE}</a>",
tpl : function (str, data) {
for(var m in data) {
if(data.hasOwnProperty(m)){
str = str.replace(new RegExp('#{'+ m +'}','g'), data[m]);
str = str.replace(new RegExp('#%7B'+ m +'%7D','g'), data[m]); /*firefox*/
}
}
return str;
},
//helpers
/*
Backbone.Scaffold.genRecordTemplate("form1", Post, "post")
*/
genRecordTemplate : function (scaffholdDef, model, modelInstanceName) {
var tpl = "<div>";
for (var member in model.scaffoldDefs[scaffholdDef]) {
var what = "<%= "+modelInstanceName+"."+member+"%>"
, what_id = "<%= "+modelInstanceName+".id%>";
tpl += "<label data-member='"+member+"'>"+member+" :</label>";
tpl += this.tpl(model.scaffoldDefs[scaffholdDef][member], {VALUE : what, VALUE_ID : what_id} );
tpl += "<BR>";
}
tpl += "</div>";
console.log(tpl);
return tpl;
},
/*
Backbone.Scaffold.genRecordSetTemplate("list1", Post, "posts", "post")
*/
genRecordSetListTemplate : function (scaffholdDef, model, collectionInstanceName, modelInstanceName, cssClass) {
var style = cssClass?"class='"+cssClass+"'":"";
var tpl = "<ul "+style+"> <% _.each("+collectionInstanceName+", function ("+modelInstanceName+") { %>";
tpl += "<li>";
for (var member in model.scaffoldDefs[scaffholdDef]) {
var what = "<%= "+modelInstanceName+"."+member+"%>"
, what_id = "<%= "+modelInstanceName+".id%>";
tpl += this.tpl(model.scaffoldDefs[scaffholdDef][member], {VALUE:what, VALUE_ID:what_id} );
tpl += " ";
}
tpl += "</li>";
tpl += "<% }); %></ul>";
console.log(tpl);
return tpl;
},
genRecordSetGridTemplate : function (scaffholdDef, model, collectionInstanceName, modelInstanceName, cssClass) {
var style = cssClass?"class='"+cssClass+"'":"";
var tpl = "<TABLE "+style+">";
tpl += "<THEAD><TR>";
for (var member in model.scaffoldDefs[scaffholdDef]) {
tpl += "<TH>"+member+"</TH>";
}
tpl += "</TR></THEAD>";
tpl += "<% _.each("+collectionInstanceName+", function ("+modelInstanceName+") { %>";
tpl += "<TR>";
for (var member in model.scaffoldDefs[scaffholdDef]) {
var what = "<%= "+modelInstanceName+"."+member+"%>"
, what_id = "<%= "+modelInstanceName+".id%>";
tpl += "<TD>";
tpl += this.tpl(model.scaffoldDefs[scaffholdDef][member], {VALUE:what, VALUE_ID:what_id} );
tpl += "</TD>";
}
tpl += "</TR>";
tpl += "<% }); %></TABLE>";
console.log(tpl);
return tpl;
}
});
window.Post = Backbone.Model.extend({
urlRoot :"/blogpost"
},{
scaffoldDefs : {
"form1" : {
title : Backbone.Scaffold.FIELD,
message : Backbone.Scaffold.TEXT,
author : Backbone.Scaffold.TWITTER
},
"list1" : {
title : Backbone.Scaffold.LINKID,
//message : Backbone.Scaffold.SPAN,
author : Backbone.Scaffold.TWITTER
},
"grid1" : {
title : Backbone.Scaffold.LINKID,
message : Backbone.Scaffold.SPAN,
author : Backbone.Scaffold.TWITTER
}
}
});
window.Posts = Backbone.Collection.extend({
model : Post,
all : function () {
this.url = "/blogposts";
return this;
},
query : function (query) {
this.url = "/blogposts/"+query;
return this;
}
});
window.PostsView = Backbone.View.extend({
el : $("#posts"),
initialize : function () {
this.template = _.template(
Backbone.Scaffold.genRecordSetListTemplate(
"list1"
, Post
, "posts"
, "post"
)
);
},
render : function() {
var renderedContent = this.template({ posts : this.collection.toJSON()});
$(this.el).html(renderedContent);
return this;
}
});
window.PostsGridView = Backbone.View.extend({
el : $("#postsGrid"),
initialize : function () {
this.template = _.template(
Backbone.Scaffold.genRecordSetGridTemplate(
"grid1"
, Post
, "posts"
, "post"
, "table table-bordered table-striped"
)
);
},
render : function() {
var renderedContent = this.template({ posts : this.collection.toJSON()});
$(this.el).html(renderedContent);
return this;
}
});
window.posts = new Posts();
posts.add([
new Post({ id:23, title:"Mon post 1", message:"message 1", author:"k33g_org"}),
new Post({ title:"Mon post 2", message:"message 2", author:"k33g_org"}),
new Post({ title:"Mon post 3", message:"message 3", author:"k33g_org"}),
new Post({ title:"Mon post 4", message:"message 4", author:"k33g_org"}),
new Post({ title:"Mon post 5", message:"message 5", author:"k33g_org"})
]);
postsView = new PostsView({ collection : posts });
postsView.render();
postsGridView = new PostsGridView({ collection : posts });
postsGridView.render();
});
</script>
</html>
<!--
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment