JayData

Understand JayData in 7 simple steps

Step 1 – Initialize resources

Initialize your resource like stylesheets, scripts and so on.

<script src="http://include.jaydata.org/jaydata.js"></script>

1

<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>

1

<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://include.jaydata.org/jaydata.js"></script>

1
2

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>

<script src="http://include.jaydata.org/knockout-2.1.0.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/knockout.js"></script>

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script<>
<script src="http://include.jaydata.org/jaydatamodules/handlebars.js"></script>

Step 2 – Define data model

Simple model that works online and offline as well.
Define your data model:

var Todo = $data.Entity.extend("Todo", {
    Id: { type: "int", key: true, computed: true },
    Task: { type: String, required: true, maxLength: 200 },
    DueDate: { type: Date },
    Completed: { type: Boolean }
});

$data.EntityContext.extend("TodoDatabase", {
    Todos: { type: $data.EntitySet, elementType: Todo }
});

var Todo = $data.Entity.extend("Todo", {

Id: { type: "int", key: true, computed: true },

Task: { type: String, required: true, maxLength: 200 },

DueDate: { type: Date },

Completed: { type: Boolean }

});

$data.EntityContext.extend("TodoDatabase", {

Todos: { type: $data.EntitySet, elementType: Todo }

});

The local item store provides an automatic client storage facitlity for every entity type.
Just define your model type and the rest is handled by the library:

var Todo = $data.Entity.extend("Todo", {
    Id: { type: "int", key: true, computed: true },
    Task: { type: String, required: true, maxLength: 200 },
    DueDate: { type: Date },
    Completed: { type: Boolean }
});

var Todo = $data.Entity.extend("Todo", {

Id: { type: "int", key: true, computed: true },

Task: { type: String, required: true, maxLength: 200 },

DueDate: { type: Date },

Completed: { type: Boolean }

});

Model types an have relationships to enforce referencial integrity

var Todo = $data.Entity.extend("Todo", {
    Id: { type: "int", key: true, computed: true },
    Task: { type: String, required: true, maxLength: 200 },
    DueDate: { type: Date },
    Completed: { type: Boolean },
    Person: { type: "Person", required: true, inverseProperty: "Todos"}
});

var Person = $data.Entity.extend("Person", {
    Id: { type: "int", key: true, computed: true },
    Name: { type: String, required: true, maxLength: 200 },
    Todos: { type: Array, elementType: Todo, inverseProperty: "Person" }
});

$data.EntityContext.extend("TodoDatabase", {
    Todos: { type: $data.EntitySet, elementType: Todo },
    People: { type: $data.EntitySet, elementType: Person }
});

var Todo = $data.Entity.extend("Todo", {

Id: { type: "int", key: true, computed: true },

Task: { type: String, required: true, maxLength: 200 },

DueDate: { type: Date },

Completed: { type: Boolean },

Person: { type: "Person", required: true, inverseProperty: "Todos"}

});

var Person = $data.Entity.extend("Person", {

Id: { type: "int", key: true, computed: true },

Name: { type: String, required: true, maxLength: 200 },

Todos: { type: Array, elementType: Todo, inverseProperty: "Person" }

});

$data.EntityContext.extend("TodoDatabase", {

Todos: { type: $data.EntitySet, elementType: Todo },

People: { type: $data.EntitySet, elementType: Person }

});

Model entities can have complex properties that are entities themselves

var Location = $data.Entity.extend("Location", {
    City: { type: String },
    Country: { type: String }
});
$data.Entity.extend("Todo", {
    Id: { type: "int", key: true, computed: true },
    Task: { type: String, required: true, maxLength: 200 },
    DueDate: { type: Date },
    Completed: { type: Boolean },
    Location: { type: Location }
});

$data.EntityContext.extend("TodoDatabase", {
    Todos: { type: $data.EntitySet, elementType: Todo }
});

var Location = $data.Entity.extend("Location", {

City: { type: String },

Country: { type: String }

});

$data.Entity.extend("Todo", {

Id: { type: "int", key: true, computed: true },

Task: { type: String, required: true, maxLength: 200 },

DueDate: { type: Date },

Completed: { type: Boolean },

Location: { type: Location }

});

$data.EntityContext.extend("TodoDatabase", {

Todos: { type: $data.EntitySet, elementType: Todo }

});

Step 3 – Initialize the data storage

var todoDB = new TodoDatabase("MyTodoDatase"); todoDB.onReady(function() { //Work with todoDB now });

1
2
3
4
5

var todoDB = new TodoDatabase("MyTodoDatase");

todoDB.onReady(function() {
//Work with todoDB now
});

var todoDB = new TodoDatabase({ 
    provider: 'webSql', databaseName: 'MyTodoDatabase'
});

todoDB.onReady(function() {
    //Work with todoDB now
});

var todoDB = new TodoDatabase({

provider: 'webSql', databaseName: 'MyTodoDatabase'

});

todoDB.onReady(function() {

//Work with todoDB now

});

var todoDB = new TodoDatabase({ 
    provider: 'indexedDb', databaseName: 'MyTodoDatabase'
});

todoDB.onReady(function() {
    //Work with todoDB now
});

var todoDB = new TodoDatabase({

provider: 'indexedDb', databaseName: 'MyTodoDatabase'

});

todoDB.onReady(function() {

//Work with todoDB now

});

var todoDB = new TodoDatabase('http://mysite/myapi'); todoDB.onReady(function() { //Work with todoDB now });

1
2
3
4
5

var todoDB = new TodoDatabase('http://mysite/myapi');

todoDB.onReady(function() {
//Work with todoDB now
});

var todoDB = new TodoDatabase({ 
    provider: 'mongoDB' , databaseName: 'MyTodoDatabase' 
});

todoDB.onReady(function() {
    //Work with todoDB now
});

var todoDB = new TodoDatabase({

provider: 'mongoDB' , databaseName: 'MyTodoDatabase'

});

todoDB.onReady(function() {

//Work with todoDB now

});

var todoDB = new TodoDatabase({
    provider: 'sqLite' , databaseName: 'MyTodoDatabase'
});

todoDB.onReady(function() {
    //Work with todoDB now
});

var todoDB = new TodoDatabase({

provider: 'sqLite' , databaseName: 'MyTodoDatabase'

});

todoDB.onReady(function() {

//Work with todoDB now

});

Step 4 – Create data

//Create
var tasks = todoDB.Todos.addMany([
    { Task: 'Step0: Get this this list', Completed: true },
    { Task: 'Step1: Define your data model'},
    { Task: 'Step2: Initialize data storage'}
]);
todoDB.saveChanges(function() {
    tasks.forEach( function(todo) { alert(todo.Id) });
});

//Create

var tasks = todoDB.Todos.addMany([

{ Task: 'Step0: Get this this list', Completed: true },

{ Task: 'Step1: Define your data model'},

{ Task: 'Step2: Initialize data storage'}

]);

todoDB.saveChanges(function() {

tasks.forEach( function(todo) { alert(todo.Id) });

});

//Create with types
var todo = new Todo();
todo.Task = "Step4: create entity";
todo.DueDate = new Date();
todoDB.add(todo);
todoDB.saveChanges().then(function() { alert("done!"); });

//Create with types

var todo = new Todo();

todo.Task = "Step4: create entity";

todo.DueDate = new Date();

todoDB.add(todo);

todoDB.saveChanges().then(function() { alert("done!"); });

//Create using ItemStore API $data('Todo').save({ Task: 'Step3: advanced'}) .then(function(newItem){ alert(newItem.Id); });

1
2
3
4
5
6

//Create using ItemStore API

$data('Todo').save({ Task: 'Step3: advanced'})
.then(function(newItem){
alert(newItem.Id);
});
//Create related data todoDB.Todos.add({ Task: "Your task", Person: new Person({Name: 'Peter'}); }); todoDB.saveChanges();

1
2
3
4
5
6

//Create related data
todoDB.Todos.add({
Task: "Your task",
Person: new Person({Name: 'Peter'});
});
todoDB.saveChanges();

//Retrieve the existing item by Id and attach to the context to track changes
var todo = todoDB.Todos.attachOrGet({ Id:1}); 
todo.Completed = true;
todoDB.saveChanges();

//Retrieve the existing item by Id and attach to the context to track changes

var todo = todoDB.Todos.attachOrGet({ Id:1});

todo.Completed = true;

todoDB.saveChanges();

Step 5 – Query data

//Filter #1
todoDB.Todos
        .filter( function(todo) {
            return todo.Completed == true ||
                    todo.Task.startsWith("Step2")
        })
        .forEach( function(todo) {
            yourTemplate.render(todo); 
        });

//Filter #1

todoDB.Todos

.filter( function(todo) {

return todo.Completed == true ||

todo.Task.startsWith("Step2")

})

.forEach( function(todo) {

yourTemplate.render(todo);

});

//Filter #2
todoDB.Todos
        .filter("it.Completed || it.Task.startsWith('Step2')")
        .forEach( function(todo) {
            yourTemplate.render(todo); 
        });

//Filter #2

todoDB.Todos

.filter("it.Completed || it.Task.startsWith('Step2')")

.forEach( function(todo) {

yourTemplate.render(todo);

});

//Use TypeScript
todoDB.Todos
        .filter(todo => todo.Completed == true)
        .map(todo => todo.Task )
        .forEach(taskName => $('#list')
        .append('Task: ' + taskName + ' completed'));

//Use TypeScript

todoDB.Todos

.filter(todo => todo.Completed == true)

.map(todo => todo.Task )

.forEach(taskName => $('#list')

.append('Task: ' + taskName + ' completed'));

//Filter on relations todoDB.Todos .filter("it.Person.Name == 'Peter'") .toArray( function(todos) { });

1
2
3
4

//Filter on relations
todoDB.Todos
.filter("it.Person.Name == 'Peter'")
.toArray( function(todos) { });

//Ordering and shaping
todoDB.Todos
        .orderBy("it.DueDate")
        .map(function(todo) { return todo.Task })
        .toArray(function(taskNameArray) { });

//Ordering and shaping

todoDB.Todos

.orderBy("it.DueDate")

.map(function(todo) { return todo.Task })

.toArray(function(taskNameArray) { });

Step 6 – Remove

//Simple remove todoDB.Todos.remove(todo); todoDB.saveChanges();

1
2
3

//Simple remove
todoDB.Todos.remove(todo);
todoDB.saveChanges();
//Remove in batch todoDB.Todos .removeAll();

1
2
3

//Remove in batch
todoDB.Todos
.removeAll();

//Remove with query
todoDB.Todos
        .filter("it.Completed == true")
        .removeAll(function() {
            alert("items removed");
        });

//Remove with query

todoDB.Todos

.filter("it.Completed == true")

.removeAll(function() {

alert("items removed");

});

Step 7 – Generate some UI

//UI with jQuery
todoDB.Todos
        .include("Person")
        .forEach(function(todo) {
            $('#todos')
                .append('<li>' + todo.Task + ',' + todo.Person.Name + '</li>');
        });

//UI with jQuery

todoDB.Todos

.include("Person")

.forEach(function(todo) {

$('#todos')

.append('<li>' + todo.Task + ',' + todo.Person.Name + '</li>');

});

//UI with Knockout
function viewModel() {
    var self = this;
    self.todos = ko.observableArray();
    todoDB.Todos
            .include("Person")
            .toArray(self.todos);
}
ko.applyBindings(new viewModel());

//UI with Knockout

function viewModel() {

var self = this;

self.todos = ko.observableArray();

todoDB.Todos

.include("Person")

.toArray(self.todos);

}

ko.applyBindings(new viewModel());

//UI with Kendo UI

$("#chart").kendoChart({
    dataSource: todoDB.Todos
        .orderByDescending('it.DueDate')
        .take(10)
        .asKendoDataSource()
});

//UI with Kendo UI

$("#chart").kendoChart({

dataSource: todoDB.Todos

.orderByDescending('it.DueDate')

.take(10)

.asKendoDataSource()

});

//UI with Handlebars.js $data("Todo") .query('it.Id > 3') .then($data.renderItemsTo("#todoList","<li>{{Task}}</li>"));

1
2
3
4

//UI with Handlebars.js
$data("Todo")
.query('it.Id > 3')
.then($data.renderItemsTo("#todoList","<li>{{Task}}</li>"));

What is JayData?

JayData is a standards-based, cross-platform Javascript library and a set of practices to access and manipulate data from various online and offline sources.

Let’s get started

How it works

JayData is a cross-platform, cross-provider, cross-layer Javascript data access library designed to streamline your data operations in mobile and web application and in nodeJS serverside code.

Learn more

Enterprise Support

Working on a project with JayData and need some help? Reliable help for mission critical projects. Get technical help and expand your knowledge of JayData.

Get support

Key features

Extended support for Visual Studio JavaScript Intellisense

Designed to make full use of Visual Studio JavaScript IntelliSense to provide the best developer experience

JavaScript Language Query (JSLQ)

JSLQ brings the philosophy of Entity Framework and LINQ from the .NET platform to the world of JavaScript

Cross-device & cross-layer paradigm

Experience the true power of JavaScript, run your code on mobile devices, in web browsers or on a NodeJS serverside

Built on HTML5 standards

Build full-featured applications powered by HTML5, capitalize on your expertise as a web developer!

UI Libraries

Javascript Language Query

dbcontext
   .Products
   .filter(function (p) {
      return p.Category.ID == 42
   }).skip(10).take(5)
   .toArray();

Simple CRUD

var product = new Northwind.Product({
      ProductName: 'Lady Gray Tea',
      Cateogory : new Northwind.Category('Teas')
   });
   Northwind.Products.add(product);
   Northwind.saveChanges();

Understand JayData in 7 simple steps

Step 1 – Initialize resources

Step 2 – Define data model

Step 3 – Initialize the data storage

Step 4 – Create data

Step 5 – Query data

Step 6 – Remove

Step 7 – Generate some UI

What is JayData?

How it works

Enterprise Support

Key features

Extended support for Visual Studio JavaScript Intellisense

JavaScript Language Query (JSLQ)

Cross-device & cross-layer paradigm

Built on HTML5 standards

UI Libraries

Javascript Language Query

Simple CRUD

Your application

In the cloud

On the device

JayData.org

Understand JayData in 7 simple steps

Step 1 – Initialize resources

Step 2 – Define data model

Step 3 – Initialize the data storage

Step 4 – Create data

Step 5 – Query data

Step 6 – Remove

Step 7 – Generate some UI

What is JayData?

How it works

Enterprise Support

Key features

Extended support for Visual Studio JavaScript Intellisense

JavaScript Language Query (JSLQ)

Cross-device & cross-layer paradigm

Built on HTML5 standards

UI Libraries

Javascript Language Query

Simple CRUD

Your application

In the cloud

On the device