Last active
August 29, 2015 14:07
-
-
Save ovrmrw/24917d17705c75f1878f to your computer and use it in GitHub Desktop.
sample: Knockout+Node+Express+ArangoDB+Foxx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// -------------------------------------------------------------------------- | |
// This JS file is located at Foxx app folder. (not Express app folder) | |
// Foxx provides Web APIs of ArangoDB for any server-side you want. (e.g. Node,ASP.NET,Rails...) | |
// -------------------------------------------------------------------------- | |
(function() { | |
"use strict"; | |
var Foxx = require("org/arangodb/foxx"), | |
controller = new Foxx.Controller(applicationContext), | |
db = require("org/arangodb").db; | |
controller.get("/People/name/:name", function(req, res) { | |
var name = req.params("name"), | |
query = "", | |
result = null; | |
query += "FOR d IN People "; | |
query += "FILTER "; | |
query += "LIKE(d.name.first, '%" + name + "%', true) || LIKE(d.name.last, '%" + name + "%', true) "; | |
query += "LIMIT 100"; | |
query += "RETURN d"; | |
result = db._query(query).toArray(); | |
res.json({ result: result }); | |
}); | |
}()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ----------------------------------------------------------------- | |
// This TS file (compiled to JS) handles Knockout view-model that works on client-side web browsers. | |
// ----------------------------------------------------------------- | |
declare var ko: any, $: any, _: any, toastr: any; | |
// Declare Person Class | |
class Person { | |
obj: any = null; // raw object | |
firstName: string = ""; | |
lastName: string = ""; | |
fullName: string = ""; | |
likes: string = ""; | |
birthday: string = ""; | |
constructor(obj: any) { | |
this.obj = obj; | |
this.firstName = obj.name.first; | |
this.lastName = obj.name.last; | |
this.fullName = obj.name.first + " " + obj.name.last; | |
this.likes = obj.likes.join(', '); | |
this.birthday = obj.birthday; | |
} | |
} | |
// Declare ViewModel Class | |
class ViewModel { | |
name: any = ko.observable("john"); | |
people: any[] = ko.observableArray([]); | |
fields: string[] = ['fullName', 'firstName', 'lastName', 'birthday', 'likes']; | |
// ------------------------------------------------------------------------------------------------- | |
// Whenever the variable 'name' changed, this function will be invoked in order to update HTML TABLE written in index.ejs. | |
// ------------------------------------------------------------------------------------------------- | |
private controlNames = ko.computed(() => { | |
var name = this.name(); | |
$.getJSON("http://localhost:8529/dev/my_app/People/name/" + encodeURIComponent(name)) | |
.done((data) => { | |
if ('result' in data) { | |
var array = data.result; | |
this.people.removeAll(); // removeAll() is a Knockout function | |
array.forEach((item) => { | |
this.people.push(new Person(item)); | |
}); | |
toastr.success("People whose name is matched with '%" + name + "%' are listed."); | |
} else { | |
toastr.error("Receiving unexpected JSON data."); | |
this.people.removeAll(); | |
} | |
}) | |
.fail(() => { | |
toastr.error("Web API error is occured."); | |
this.people.removeAll(); | |
}); | |
}).extend({ rateLimit: { timeout: 1000, method: "notifyWhenChangesStop" } }); // setting delay time | |
} | |
var vm = new ViewModel(); | |
ko.punches.enableAll(); // *Write this before ko.applyBindings().* | |
ko.applyBindings(vm); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
.............. | |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/css/toastr.min.css"> | |
</head> | |
<body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This EJS(HTML) file works together with Knockout view-model written in first.ts(first.js). | |
--> | |
<% include header %> | |
<h1><%-title %></h1> | |
<p>Welcome to <%-title %></p> | |
<label>Name: </label> | |
<input data-bind="textInput: name" type="text" /> | |
<hr> | |
<table border=1> | |
<thead> | |
<tr data-bind="foreach: {data: fields, as: 'field'}"> | |
<th>{{ field }}</th> | |
</tr> | |
</thead> | |
<tbody data-bind="foreach: {data: people, as: 'person'}"> | |
<tr data-bind="foreach: {data: $parent.fields, as: 'field'}"> | |
<td>{{ person[field] }}</td> | |
</tr> | |
</tbody> | |
</table> | |
<% include footer %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is a sample data from full JSON file. */ | |
{ | |
"gender": "male", | |
"name": { | |
"first": "Eddy", | |
"last": "Mungin" | |
}, | |
"birthday": "1962-01-20", | |
"memberSince": "2009-03-10", | |
"contact": { | |
"region": "225", | |
"phone": [ | |
"225-6296182" | |
], | |
"address": { | |
"zip": "70757", | |
"state": "LA", | |
"street": "18 Calvert Cir", | |
"city": "Maringouin" | |
}, | |
"email": [ | |
"eddy.mungin@nosql-matters.org", | |
"mungin@nosql-matters.org" | |
] | |
}, | |
"likes": [ | |
"running", | |
"skiing" | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment