Understand JayData in 7 simple steps
Step 1 – Initialize resources
Initialize your resource like stylesheets, scripts and so on.
1<script src="http://include.jaydata.org/jaydata.js"></script>
1<script src="http://include.jaydata.org/jaydata.js"></script>
12<script src="http://code.jquery.com/jquery.min.js"></script><script src="http://include.jaydata.org/jaydata.js"></script>
123<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>
123<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>
123<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:12345678910var 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:123456var 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
123456789101112131415161718var 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
123456789101112131415var 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
-
12345var todoDB = new TodoDatabase("MyTodoDatase");todoDB.onReady(function() {//Work with todoDB now});
-
1234567var todoDB = new TodoDatabase({provider: 'webSql', databaseName: 'MyTodoDatabase'});todoDB.onReady(function() {//Work with todoDB now});
-
1234567var todoDB = new TodoDatabase({provider: 'indexedDb', databaseName: 'MyTodoDatabase'});todoDB.onReady(function() {//Work with todoDB now});
-
12345var todoDB = new TodoDatabase('http://mysite/myapi');todoDB.onReady(function() {//Work with todoDB now});
-
1234567var todoDB = new TodoDatabase({provider: 'mongoDB' , databaseName: 'MyTodoDatabase'});todoDB.onReady(function() {//Work with todoDB now});
-
1234567var todoDB = new TodoDatabase({provider: 'sqLite' , databaseName: 'MyTodoDatabase'});todoDB.onReady(function() {//Work with todoDB now});
Step 4 – Create data
-
123456789//Createvar 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) });});
-
123456//Create with typesvar todo = new Todo();todo.Task = "Step4: create entity";todo.DueDate = new Date();todoDB.add(todo);todoDB.saveChanges().then(function() { alert("done!"); });
-
123456//Create using ItemStore API$data('Todo').save({ Task: 'Step3: advanced'}).then(function(newItem){alert(newItem.Id);});
-
123456//Create related datatodoDB.Todos.add({Task: "Your task",Person: new Person({Name: 'Peter'});});todoDB.saveChanges();
-
1234//Retrieve the existing item by Id and attach to the context to track changesvar todo = todoDB.Todos.attachOrGet({ Id:1});todo.Completed = true;todoDB.saveChanges();
Step 5 – Query data
-
123456789//Filter #1todoDB.Todos.filter( function(todo) {return todo.Completed == true ||todo.Task.startsWith("Step2")}).forEach( function(todo) {yourTemplate.render(todo);});
-
123456//Filter #2todoDB.Todos.filter("it.Completed || it.Task.startsWith('Step2')").forEach( function(todo) {yourTemplate.render(todo);});
-
123456//Use TypeScripttodoDB.Todos.filter(todo => todo.Completed == true).map(todo => todo.Task ).forEach(taskName => $('#list').append('Task: ' + taskName + ' completed'));
-
1234//Filter on relationstodoDB.Todos.filter("it.Person.Name == 'Peter'").toArray( function(todos) { });
-
12345//Ordering and shapingtodoDB.Todos.orderBy("it.DueDate").map(function(todo) { return todo.Task }).toArray(function(taskNameArray) { });
Step 6 – Remove
-
123//Simple removetodoDB.Todos.remove(todo);todoDB.saveChanges();
-
123//Remove in batchtodoDB.Todos.removeAll();
-
123456//Remove with querytodoDB.Todos.filter("it.Completed == true").removeAll(function() {alert("items removed");});
Step 7 – Generate some UI
-
1234567//UI with jQuerytodoDB.Todos.include("Person").forEach(function(todo) {$('#todos').append('<li>' + todo.Task + ',' + todo.Person.Name + '</li>');});
-
123456789//UI with Knockoutfunction viewModel() {var self = this;self.todos = ko.observableArray();todoDB.Todos.include("Person").toArray(self.todos);}ko.applyBindings(new viewModel());
-
12345678//UI with Kendo UI$("#chart").kendoChart({dataSource: todoDB.Todos.orderByDescending('it.DueDate').take(10).asKendoDataSource()});
-
1234//UI with Handlebars.js$data("Todo").query('it.Id > 3').then($data.renderItemsTo("#todoList","<li>{{Task}}</li>"));