Skip to content

Commit

Permalink
#20 updating examples / adding backbone & jquery demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@tracend
tracend committed Mar 22, 2013
1 parent 1b6bb82 commit 750abe1
Show file tree
Hide file tree
Showing 10 changed files with 325 additions and 192 deletions.
95 changes: 20 additions & 75 deletions examples/auth/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,50 @@
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://localhost:4000/client.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<script src="crudr/client.js"></script>

<script>
// variables
var chat, model, el;
// CHANGE THIS with your own backend...
var backend = "demo_demo_chat";
var auth = {
key : "37fff53aeb6094f55b0328082aaf1de7",
//secret : "$2a$10$lBY2DZ4l/Goow9BnznPLBuTTjM8nlOGHXgcZjO59v86uMntYIzjQy",
log : true
};
//
function setupEvents(){

chat.addEventListener(backend +':create', function( e ) {
//console.log("create");
var data = e.response.data;
$("#chat").append("<li>"+data+"</li>");
}, false);
chat.addEventListener(backend +':read', function( e ) {
//foreach
//console.log("read");
var list = e.response;
for(i in list){
$("#chat").append("<li>"+list[i].data+"</li>");
}

}, false);

}

function setupTriggers(){
function setupTrigger(){

$(".send").click(function(){
var text = $(".message").val();
// add to the chat
$("#chat").append("<li>"+text+"</li>");
// sync with crudr
var req = {
method: "create",
model: { data : text },
options: null
};
crudr.sync(model.socket, req, { error: function(err){ console.log(err) }, success: function( response ){
//console.log( response );
}
});

});
$(".send").click( initConnect );

}

function loadData(){
function initConnect(){

// sync with crudr
var req = {
method: "read",
model: {}
};
crudr.connect(auth, function( response ){

alert("authentication completed");

crudr.sync(model.socket, req, { error: function(err){ console.log(err) }, success: function( response ){
//console.log( response );
}
});
});

}

$(function() {
chat = document.getElementById("chat");

crudr.connect(auth, function( response ){

//var message = new Message();

model = crudr.subscribe({
name: backend,
el: chat
});

setupEvents();

setupTriggers();

loadData();

});

setupTrigger();

});

</script>

</head>
<body>
<h1>Chat</h1>
<ul id="chat"></ul>

<input class="message" type="text">
<input class="send" type="submit" value="Send">
<h1>Authentication</h1>
<p>This is a specialized example, dealing only with the authentication portion of CRUDr</p>
<p>To get a better idea of what's happening you'll need to open the developer console.</p>
<p>As the state of the lib changes, you'll see related updates in the console.</p>
<p>Also helpful is the server.js, which contains an example response to the authentication request...</p>
<p>To start the authentication, click the button below:</p>
<input class="send" type="submit" value="Start!">

</body>
</html>
21 changes: 17 additions & 4 deletions examples/auth/server.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var express = require("express"),
crudr = require("../../index"), // Include CRUDr lib
crudr = require("crudr"), // Include CRUDr lib
http = require("http");

var app = express();
Expand All @@ -9,7 +9,12 @@ var server = http.createServer(app);
var config = {
"backends" : {
"test" : "memoryStore"
},
/* custom auth link:
"routes" : {
"auth" : "auth"
}
*/
}

// setup options
Expand All @@ -24,8 +29,16 @@ crudr.listen(options);

// map static folder
app.use(express.static(__dirname + '/public'));
//app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
//app.use(express.logger());
//app.use(app.router);

// Authentication
// - simplistic example to verify client
app.get("/auth", function( req, res ){
// verify host
// create token
var access_token = "234tyh34567865432";
var expires_in = 3600; // an hour
// send response
res.send({ access_token: access_token, expires_in : expires_in });
});

server.listen(80);
139 changes: 139 additions & 0 deletions examples/backbone/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!doctype html>
<html>
<head>
<!-- dependencies -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<!-- backbone extension -->
<script type="text/javascript" src="//raw.github.com/backbone-api/crudr/master/backbone.crudr.js"></script>
<!-- CRUDr client lib -->
<script type="text/javascript" src="crudr/client.js"></script>
<!-- custom logic -->
<script type="text/javascript">

var Message = Backbone.Model.extend({

initialize: function() {
this.bind('error', function(model, err) {
alert(err.message);
});
}

});

var Messages = Backbone.Collection.extend({

// CHANGE THIS with your own backend, matching the configuration in server.js
backend: 'test',

model: Message,

initialize: function() {
// Setup default backend bindings
// (see lib/client.js for details).
this.bindBackend();
}

});

var MessageView = Backbone.View.extend({

tagName: 'li',

events: {
'click .delete': 'delete'
},

initialize: function() {
_.bindAll(this, 'render', 'delete');

this.template = _.template($('#message-template').html());
},

render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},

delete: function(e) {
e.preventDefault();
this.model.destroy();
}

});

var MessagesView = Backbone.View.extend({

events: {
'click .send': 'send',
'keypress .message': 'keypress'
},

initialize: function(options) {
_.bindAll(this, 'render', 'send', 'keypress');

this.collection.bind('add', this.render);
this.collection.bind('change', this.render);
this.collection.bind('remove', this.render);
this.collection.bind('reset', this.render);
this.collection.fetch();

this.template = _.template($('#messages-template').html());
},

render: function() {
$(this.el).html(this.template());

if( this.collection.length ){
this.collection.each(function(message) {
var view = new MessageView({ model: message });
this.$('ul').append(view.render().el);
});
}

return this;
},

send: function() {
this.collection.create({ text: this.$('.message').val() });
this.$('.message').val('');
},

keypress: function(e) {
if (e.which === 13) this.send();
}

});

$(function() {
// initialize crudr
crudr.connect({ auth: false }, function( response ){

window.messages = new Messages();
new MessagesView({ el: $('#messages'), collection: messages }).render();

});

});

</script>

<script id="message-template" type="text/template">
<%= text %>
<a class="delete" href="#">[x]</a>
</script>

<script id="messages-template" type="text/template">
<input class="message" type="text">
<input class="send" type="submit" value="Send">
<ul></ul>
</script>
</head>
<body>
<h1>Backbone Messaging</h1>
<p>A more complex example with templating and data models using Backbone.js</p>
<p>The integration is streamlined with the usage of the <a href="https://github.com/backbone-api/crudr">backbone.crudr</a> extension</p>
<div id="messages"></div>
</body>
</html>
34 changes: 34 additions & 0 deletions examples/backbone/server.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
var express = require("express"),
crudr = require("crudr"), // Include CRUDr lib
http = require("http");

var app = express();
var server = http.createServer(app);

// override default config
var config = {
"backends" : {
"test" : "memoryStore"
}
}

// setup options
var options = {
config: config,
app: app,
server: server
};

// initialize CRUDr
crudr.listen(options);

// map static folder
app.use(express.static(__dirname + '/public'));

// post-init setup
//crudr.db["messages"].use(crudr.helpers.cookieParser());
//crudr.db["messages"].use(crudr.helpers.session({ store: sessions }));
//crudr.db["messages"].use('create', 'update', 'delete', auth);


server.listen(80);
Loading

0 comments on commit 750abe1

Please sign in to comment.