{"_id":"56fc3a02c366860e00a9d487","__v":22,"version":{"_id":"56a0bd9e3697d80d002ac5e7","project":"54774d9af3736008009e9e0e","__v":20,"createdAt":"2016-01-21T11:14:38.131Z","releaseDate":"2016-01-21T11:14:38.131Z","categories":["56a0bd9f3697d80d002ac5e8","56a0bd9f3697d80d002ac5e9","56a0bd9f3697d80d002ac5ea","56a0bd9f3697d80d002ac5eb","56b098a43a5b810d00745e3f","56b098da8f7a4f0d0029dd10","56d5a8ecf612b80b00fb69cd","570989853ab43c0e0072b2d6","571006aa10300c0e007f6133","5735a52431a73b1700887ca0","5744b0529e045c0e00b7a7a2","5744b1d0b56d431700d8a4fb","5744b1fb55d65a0e00b436e1","5744b218f9c7411700ce560e","5744b220f9c7411700ce560f","5744b2259e045c0e00b7a7a7","5744b22cf8b79f0e00de6a2d","5744b23155d65a0e00b436e4","5744b242c758290e00fbc235","5744b2569e045c0e00b7a7a8","5756a3f2bb92962900dafe3d","57ee23e81e42900e0014a42f","581c822c98676e0f00d240ef"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Sockets","version_clean":"1.1.0","version":"1.1"},"category":{"_id":"56a0bd9f3697d80d002ac5e8","pages":["56a0bda03697d80d002ac5f4","56a0bda03697d80d002ac5f5","56a0bda03697d80d002ac5f6","56a0bda03697d80d002ac5f7","56a0bda03697d80d002ac5f8","56a0bda03697d80d002ac5f9","56a0bda03697d80d002ac5fa","56a0bda03697d80d002ac5fb","56a0bda03697d80d002ac5fc","56a0bda03697d80d002ac5fd","56a0bda03697d80d002ac5fe"],"__v":1,"project":"54774d9af3736008009e9e0e","version":"56a0bd9e3697d80d002ac5e7","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-27T16:46:04.014Z","from_sync":false,"order":8,"slug":"libraries-quick-starts","title":"Libraries Quick Starts"},"project":"54774d9af3736008009e9e0e","user":"56996a013da4370d009d2127","parentDoc":null,"updates":["5850d9e3ef45910f00172787"],"next":{"pages":[],"description":""},"createdAt":"2016-03-30T20:41:38.057Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"1. [Overview](#overview)\n2. [Installation](#installation)\n3. [Configuration](#configuration)\n4. [Data Management with Ember Data](#data-management-with-ember-data)\n5. [Injecting the Service](#injecting-the-service)\n6. [Examples](#examples)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nThe Syncano Ember add-on is designed to integrate Syncano directly into your Ember-CLI application seamlessly. It works with Ember Data to persist data changes from your Ember application to your Syncano Instance.\n\nView the [source code](https://github.com/Syncano/ember-syncano).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Installation\"\n}\n[/block]\nTo install the Syncano Ember add-on, you will need to run the following command from your Ember-CLI application.\n\n`ember install ember-syncano`\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Configuration\"\n}\n[/block]\nOnce installed, you will need to add the code block below to your app's config file at `app/config/environment.js` and insert your credentials.\n\n```javascript\nsyncano: {\n  accountKey: 'your-account-key', // optional unless calling methods from the account scope\n  apiKey: 'your-api-key',\n  instance: 'your-instance-name'\n}\n```\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Data Management with Ember Data\"\n}\n[/block]\nThe `ember-syncano` add-on works seamlessly with Ember Data. All you need to do is set up your Syncano Data Class and Ember Model with the same name, properties, and attribute types. For example, if you wanted to create a Todo model, you could set it up in Ember like this under `app/models/todo.js`.\n\n```javascript\nimport DS from 'ember-data';\n\nexport default DS.Model.extend({\n  title: DS.attr('string'),\n  is_completed: DS.attr('boolean')\n});\n```\n\nThen, you would create a Syncano Data Class named `todo` with `title` as a `string` and `is_completed` as a `boolean`.\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/zXjSlIwSEi80lFjZj5iQ_Screen%20Shot%202016-03-30%20at%202.08.58%20PM.png\",\n        \"Screen Shot 2016-03-30 at 2.08.58 PM.png\",\n        \"1085\",\n        \"700\",\n        \"#275b94\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWith that set up correctly, you can manage your data like your normally would with Ember Data's store. For example, you could pull in a list of all of your todo items like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"this.store.findAll('todo');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAdd a todo item\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var item = this.store.createRecord('todo', {'title': 'First Item', 'is_completed': false});\\nitem.save();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nUpdate a todo item\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"item.set('is_completed', true);\\nitem.save();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nDelete a todo item\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"item.destroyRecord();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Injecting the Service\"\n}\n[/block]\nIn addition to data management, you can also inject the Syncano library directly into a route, controller, or component in Ember. This will allow you to access other Syncano functions such as running Scripts and Script Endpoints, User Authentication, and others. To do this, you need to add the code below to the route, controller, or component you want to be able to use Syncano.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"syncano: Ember.inject.service('syncano')\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nOnce Syncano is injected correctly, you will be able to call its functions by accessing the object.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"this.get('syncano')\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\nFor more information about using `ember-syncano` check out the following examples:\n* [Build a 5 Minute Todo App with Syncano's New Ember Add-on](https://www.syncano.io/blog/ember-syncano-addon/)\n* [Add Filtering and Sorting to an Ember-Syncano Todo App](https://www.syncano.io/blog/queries-with-ember-syncano/)","excerpt":"Ember add-on Quick Start","slug":"ember-syncano","type":"basic","title":"Ember.js"}

Ember.js

Ember add-on Quick Start

1. [Overview](#overview) 2. [Installation](#installation) 3. [Configuration](#configuration) 4. [Data Management with Ember Data](#data-management-with-ember-data) 5. [Injecting the Service](#injecting-the-service) 6. [Examples](#examples) [block:api-header] { "type": "basic", "title": "Overview" } [/block] The Syncano Ember add-on is designed to integrate Syncano directly into your Ember-CLI application seamlessly. It works with Ember Data to persist data changes from your Ember application to your Syncano Instance. View the [source code](https://github.com/Syncano/ember-syncano). [block:api-header] { "type": "basic", "title": "Installation" } [/block] To install the Syncano Ember add-on, you will need to run the following command from your Ember-CLI application. `ember install ember-syncano` [block:api-header] { "type": "basic", "title": "Configuration" } [/block] Once installed, you will need to add the code block below to your app's config file at `app/config/environment.js` and insert your credentials. ```javascript syncano: { accountKey: 'your-account-key', // optional unless calling methods from the account scope apiKey: 'your-api-key', instance: 'your-instance-name' } ``` [block:api-header] { "type": "basic", "title": "Data Management with Ember Data" } [/block] The `ember-syncano` add-on works seamlessly with Ember Data. All you need to do is set up your Syncano Data Class and Ember Model with the same name, properties, and attribute types. For example, if you wanted to create a Todo model, you could set it up in Ember like this under `app/models/todo.js`. ```javascript import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), is_completed: DS.attr('boolean') }); ``` Then, you would create a Syncano Data Class named `todo` with `title` as a `string` and `is_completed` as a `boolean`. [block:image] { "images": [ { "image": [ "https://files.readme.io/zXjSlIwSEi80lFjZj5iQ_Screen%20Shot%202016-03-30%20at%202.08.58%20PM.png", "Screen Shot 2016-03-30 at 2.08.58 PM.png", "1085", "700", "#275b94", "" ] } ] } [/block] With that set up correctly, you can manage your data like your normally would with Ember Data's store. For example, you could pull in a list of all of your todo items like this. [block:code] { "codes": [ { "code": "this.store.findAll('todo');", "language": "javascript" } ] } [/block] Add a todo item [block:code] { "codes": [ { "code": "var item = this.store.createRecord('todo', {'title': 'First Item', 'is_completed': false});\nitem.save();", "language": "javascript" } ] } [/block] Update a todo item [block:code] { "codes": [ { "code": "item.set('is_completed', true);\nitem.save();", "language": "javascript" } ] } [/block] Delete a todo item [block:code] { "codes": [ { "code": "item.destroyRecord();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Injecting the Service" } [/block] In addition to data management, you can also inject the Syncano library directly into a route, controller, or component in Ember. This will allow you to access other Syncano functions such as running Scripts and Script Endpoints, User Authentication, and others. To do this, you need to add the code below to the route, controller, or component you want to be able to use Syncano. [block:code] { "codes": [ { "code": "syncano: Ember.inject.service('syncano')", "language": "javascript" } ] } [/block] Once Syncano is injected correctly, you will be able to call its functions by accessing the object. [block:code] { "codes": [ { "code": "this.get('syncano')", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Examples" } [/block] For more information about using `ember-syncano` check out the following examples: * [Build a 5 Minute Todo App with Syncano's New Ember Add-on](https://www.syncano.io/blog/ember-syncano-addon/) * [Add Filtering and Sorting to an Ember-Syncano Todo App](https://www.syncano.io/blog/queries-with-ember-syncano/)