I'm using a rest adapter with ember-data 1.0 and ember.js 1.0
given these models:
App.Customer = DS.Model.extend({
name: DS.attr('string'),
state: DS.belongsTo("State")
});
App.State = DS.Model.extend({
region: DS.attr('string'),
state: DS.attr('string'),
stateName: DS.attr('string'),
customers: DS.hasMany("Customer")
});
when I go to /#/states, I get this json response
{
"states": [
{
"region": "West",
"state": "AZ",
"stateName": "Arizona",
"id": "0x0000000000000324",
"customers": [
"0x00000000000001e5"
]
},
{
"region": "West",
"state": "CA",
"stateName": "California",
"id": "0x0000000000000325",
"customers": [
"0x00000000000001c0",
"0x00000000000001c4",
"0x00000000000001d4"
]
}
]
"customers" : [
{
}
]
}
Now, I have a couple of questions
1) What should I put in the Customers part ? A complete list of all the customers, or just a list of the customers that are specified in the state list ?
2) what data should I send back if I visit /#/customers ?
3) If I were to edit a customer. would I set it up so that the lookup/combo makes a separate request to the server ?
thanks for the help !
1) In your original JSON the customers array should only contain customers who are present in the state list.
2) This depends on your app. Generally you would want /customers to return all customers. Or maybe a paginated collection of customers. Or maybe only customers that the currently logged in user is allowed to see. Etc...
3) When you edit a customer Ember should already have the customer data loaded, so no additional lookup request should be required.
Related
I'm building an adapter to wrap the Keen.io API, so far I've been able to successfully load the projects resource, however the returned object looks like this:
{
partners_url: "/3.0/projects/<ID>/partners",
name: "Project Name",
url: "/3.0/projects/<ID>",
saved_queries: [ ],
events_url: "/3.0/projects/<ID>/events",
id: "<ID>",
organization_id: "<ORG ID>",
queries_url: "/3.0/projects/<ID>/queries",
api_key: "<API KEY>",
events: [
{
url: "/3.0/projects/<ID>/events/user_signup",
name: "user_signup"
},
{
url: "/3.0/projects/<ID>/events/user_converted",
name: "user_converted"
},
{
url: "/3.0/projects/<ID>/events/user_created_project",
name: "user_created_project"
}
]
}
Excluding a lot of cruft, Ember has no trouble mapping the name and id attributes using the RESTSerializer, but if I add an events relation to my Project model it blows up with:
Error while loading route: TypeError: Cannot set property 'store' of undefined
at Ember.Object.extend.modelFor (http://localhost:3000/assets/ember-data.js?body=1:9813:23)
at Ember.Object.extend.recordForId (http://localhost:3000/assets/ember-data.js?body=1:9266:21)
at deserializeRecordId (http://localhost:3000/assets/ember-data.js?body=1:10197:27)
at deserializeRecordIds (http://localhost:3000/assets/ember-data.js?body=1:10211:9)
at http://localhost:3000/assets/ember-data.js?body=1:10177:11
at http://localhost:3000/assets/ember-data.js?body=1:8518:20
at http://localhost:3000/assets/ember.js?body=1:3404:16
at Object.OrderedSet.forEach (http://localhost:3000/assets/ember.js?body=1:3247:10)
at Object.Map.forEach (http://localhost:3000/assets/ember.js?body=1:3402:10)
at Function.Model.reopenClass.eachRelationship (http://localhost:3000/assets/ember-data.js?body=1:8517:42)
From my investigation this seems to be because it can't find the inverse relation to map an Event back to a Project because there's no parent ID.
Is it possible to create a relation in Ember Data to support this? Or is it possible to modify the Serializer to append a projectId to each event before loading?
I'm using Ember 1.5.0-beta.4 and Ember Data 1.0.0-beta.7+canary.f482da04.
Assuming your Project model is setup the following way:
App.Project = DS.Model.extend({
events: DS.hasMany('event');
});
You need to make sure that the JSON from your API is in a certain shape that Ember-Data expects.
{
"project": {
"id": 1,
"events": ["1", "2"],
},
"events": [{
"id": "1",
"name": "foo"
}, {
"id": "2",
"name": "bar"
}]
}
You can, however, implement extractArrayin your model's serializer to transform the JSON from the server into something similar like the above example.
There's a working example and an explanation in the Ember docs.
I may be making a Promise faux pas but after authenticating a user I want to load the user's profile into the App.Session singleton that I've created:
App.Session.set(
'userProfile',
self.get('store').find('user',App.Session.get('userId'))
);
This results in the API call being made and a valid resultset being returned but for some reason in the debugger I get an empty result. Specifically, I do see the User.id but the rest of the columns are blank.
From the debugger, here's the JSON response:
{
"user": {
"id": "1",
"username": "jsmith",
"name": {
"first_name": "Joe",
"last_name": "Smith"
},
"emails": [
{
"id": "52153c0330063",
"name": "work-1",
"type": "other",
"address": "new#notreally.com",
"comments": "",
"status": "active",
"is_primary": false
},
{
"id": "52153d1b90ad0",
"name": "work-2",
"type": "other",
"address": "old#yesreally.com",
"comments": "",
"status": "active",
"is_primary": true
},
]
}
I'm a little new to Promises and so I thought maybe if I changed the code to:
self.get('store').find('user',App.Session.get('userId')).then( function(profile){
App.Session.set('userProfile', profile);
});
I felt pretty good about my new Promise acumen as I wrote this new code. Sadly my proud moment was greeted with failure. My second code snippet behaves precisely the same as the first one. Huh?
Can anyone help?
--------- ** UPDATE ** ---------
I've now including the model definition for User and a picture of the debugger window I made reference to.
User Model
App.RawTransform = DS.Transform.extend({
deserialize: function(serialized) {
return serialized;
},
serialize: function(deserialized) {
return deserialized;
}
});
App.NameTransform = DS.Transform.extend({
deserialize: function(serialized) {
return App.Name.create(serialized);
},
serialize: function(deserialized) {
return JSON.stringify(deserialized);
}
});
App.User = DS.Model.extend({
username: DS.attr("string"),
name: DS.attr("name"),
roles: DS.attr("raw"),
goals: DS.attr("raw"),
places: DS.attr("raw"),
emails: DS.attr("raw"),
networks: DS.attr("raw"),
relationships: DS.attr("raw"),
services: DS.attr("raw"),
uom: DS.attr("raw"),
});
Debug Window
Prior to login the model viewer looks like this:
Then after login it looks like this:
And then looking at the record details we see:
Ok, the answer seems to be down to two things. First of all, the second code snippet for handling the promise that I tried:
self.get('store').find('user',App.Session.get('userId')).then( function(profile){
App.Session.set('userProfile', profile);
});
is the correct way to go. The first method just leaves you with a "broken promise" in a "broken heart" sort of way not technically speaking but the point is it doesn't work.
The reason that my second promise implementation didn't work though was down to the Model indirectly and very specifically down to the deserializer I had put in place for Names.
I was scratching my head on this for second as the deserializer had worked back in the Ember-Data v0.1x world so I did what seemed appropriate ... I blamed Ember-Data. Come on, we've all done it. The fact is that Ember-Data had nothing to do with it and once I was willing to accept the blame I realised that it was simply a matter of not having moved my Name object over to the project I'm currently working on. Doh!
I'm using EmberJs and Ember-Data in a Google App Engine project which uses NDB. In the database I have Host, Probe and Check entities. The database model doesn't really matter as long as I have my REST api in order but for clarity here are my database Classes:
class Host(ndb.Model):
hostName = ndb.StringProperty()
hostKey = ndb.Key('Host', 'SomeHostId')
class Probe(ndb.Model):
checkName = ndb.StringProperty()
probeKey = ndb.Key('Host', 'SomeHostId', 'Probe', 'SomeProbeId')
class Check(ndb.Model):
checkName = ndb.StringProperty()
checkKey = ndb.Key('Host', 'SomeHostId', 'Probe', 'SomeProbeId', 'Check', 'SomeCheckId')
I've added the keys in order to show that each host has some probes running on them and each probe performs some checks.
Host
Probe
Check
In my App.Js I have defined the following models:
App.Host = DS.Model.extend({
hostName: DS.attr('string')
probes: DS.hasMany('probe',{async:true})
});
App.Probe = DS.Model.extend({
host: DS.belongsTo('host'),
probeName: DS.attr('string')
checks: DS.hasMany('check',{async:true})
});
App.Check = DS.Model.extend({
probe: DS.belongsTo('probe'),
hostName: DS.attr('string')
});
I have defined the following router:
App.Router.map(function() {
this.resource('hosts', function(){
this.resource('host', { path:':host_id'}, function(){
this.resource('probes', function(){
this.resource('probe', { path:':probe_id'}, function(){
this.resource('checks', function(){
this.resource('check', { path:':check_id'}, function(){
});
});
});
});
});
});
});
And in AppEngine if have built the following URL paths:
app = webapp2.WSGIApplication([
('/', MainHandler),
webapp2.Route('/hosts', HostsHandler),
webapp2.Route('/hosts/<hostId>/', HostHandler),
webapp2.Route('/hosts/<hostId>/probes', ProbesHandler),
webapp2.Route('/hosts/<hostId>/probes/<probeId>/checks', ChecksHandler),
webapp2.Route('/hosts/<hostId>/probes/<probeId>/checks/<checkId>/', CheckHandler)
])
http://example.com/hosts returns:
{
"hosts": [
{
"hostName": "SomeHostName1",
"id": "SomeHostId1"
},
{
"hostName": "SomeHostName2",
"id": "SomeHostId2"
}
]
}
http://example.com/hosts/SomeHostId1/probes returns:
{
"probes": [
{
"probeName": "SomeProbeName1",
"id": "SomeProbeId1",
"host_id": "SomeHostId1"
},
{
"probeName": "SomeProbeName2",
"id": "SomeProbeId2",
"host_id": "SomeHostId1"
}
]
}
http://example.com/hosts/SomeHostId1/probes/SomeProbeId1/checks returns:
{
"checks": [
{
"checkName": "SomeCheckName1",
"id": "SomeCheckId1",
"probe_id": "SomeProbeId1"
},
{
"checkName": "SomeCheckName2",
"id": "SomeCheckId2",
"probe_id": "SomeProbeId1"
}
]
}
My templates are:
<script type="text/x-handlebars" id="host">
<h3>{{hostName}}</h3>
{{#link-to 'probes' probes}}probes{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="probes">
{{#each probe in probes}}
Probe: {{probe.probeName}}
{{#link-to 'checks' probe.checks}}checks{{/link-to}}
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="checks">
{{#each check in checks}}
Check: {{check.checkName}}
{{/each}}
</script>
Now I have all this... but no clue how to tie it up together so that Ember-Data makes the right http requests. So far I've only seen request go to http://example.com/modelName/
Currently Ember Data does not support this type of nested routes for API endpoints. There's been some talk about this, but it doesn't seem to be making any forward progress.
I don't know anything about App engine, but if you could obtain a config like this, for ember-data rest adapter
app = webapp2.WSGIApplication([
('/', MainHandler),
webapp2.Route('/hosts', HostsHandler),
webapp2.Route('/hosts/<hostId>', HostHandler),
webapp2.Route('/probes', ProbesHandler),
webapp2.Route('/probes/<probeId>', ProbesHandler),
webapp2.Route('/checks/', CheckHandler)
webapp2.Route('/checks/<checkId>/', CheckHandler)
])
And the response to http://example.com/hosts should return a json array hosts:[{},{}] and to http://example.com/hosts/1 a json representing a host object host:{} and the same for the other AppEngine routes
You have defined the Host model twice, I think that shouldn't have been the case. I am pretty new to ember and haven't used async:true feature, but I have been able to do things like(but I hadn't used nested route):
App.Host = DS.Model.extend({
hostName: DS.attr('string')
probes: DS.hasMany('probe')
});
App.Probe = DS.Model.extend({
probeName: DS.attr('string')
checks: DS.hasMany('check')
});
App.Check = DS.Model.extend({
checkName: DS.attr('string')
});
and you can spin up a rest api for host that returns :
{
"hosts": [
{
"hostName": "SomeHostName1",
"id": "SomeHostId1",
"probes":["p1","p2"]
},
{
"hostName": "SomeHostName2",
"id": "SomeHostId2",
"probes":["p2","p3"]
}
],
"probes": [
{
"probeName": "SomeProbeName1",
"id": "p1",
"checks":["c1","c2"]
},
{
"probeName": "SomeProbeName2",
"id": "p2",
"checks":["c2","c3"]
}
],
"checks": [
{
"checkName": "SomeCheckName1",
"id": "c1"
},
{
"checkName": "SomeCheckName2",
"id": "c2"
}
]
}
In my case I didn't have nested route but I think we should be able to set the controller content from the master payload somehow since all the required content are in store already! I don't know if it was of any help, but this is something I would also like to know the answer of.
Here,I am trying to implement CRUD operations using ember-model.
I am totally new to ember environment,actually i don't have much understanding of ember-model.
Here,i am trying to add new product and delete existing one.I am using inner node of fixture
i.e. cart_items.My this fixture contains two node i.e. logged_in and cart_items and this what my fixture structure :
Astcart.Application.adapter = Ember.FixtureAdapter.create();
Astcart.Application.FIXTURES = [
{
"logged_in": {
"logged": true,
"username": "sachin",
"account_id": "4214"
},
"cart_items": [
{
"id": "1",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "2",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "3",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
}
]
}
];
I want to this fixture struture only to get data in one service call from server.
Now,here is my code which i am using to add and delete product from cart_items
Astcart.IndexRoute = Ember.Route.extend({
model: function() {
return Astcart.Application.find();
}
});
Astcart.IndexController = Ember.ArrayController.extend({
save: function(){
this.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({name: this.get('newProductDesc'),qty: this.get('newProductQty'),price: this.get('newProductPrice'),subtotal: this.get('newProductSubtotal')});
new_cart_item.save();
});
},
deleteproduct: function(product){
if (window.confirm("Are you sure you want to delete this record?")) {
this.get('model').map(function(application) {
application.get('cart_items').deleteRecord(product);
});
}
}
});
But when i am trying to save product i am getting an exception
Uncaught TypeError: Object [object global] has no method 'get'
And when i am trying to delete product i am getting an exception
Uncaught TypeError: Object [object Object] has no method 'deleteRecord'
Here,i also want to implement one functionality i.e. on every save i need to check if that product is already present or not.
If product is not present then only save new product other wise update existing product.
But i don't have any idea how to do this?
I have posted my complete code here.
Can anyone help me to make this jsfiddle work?
Update
I have updated my code here with debugs.
Here, i am not getting any exception but record is also not getting delete.
I am not getting what is happening here?
Can anyone help me to make this jsfiddle work?
'this' context changes within your save method. You need to use the 'this' of the controller and not the map functions. Try this:
save: function(){
var self = this;
self.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({
name: self.get('newProductDesc'),
qty: self.get('newProductQty'),
price: self.get('newProductPrice'),
subtotal: self.get('newProductSubtotal')
});
new_cart_item.save();
});
}
Working on an App with Ember RC6 and Ember-Data v0.13-54 along a custom server PHP API am running into some problems with Models relations (mainly many-to-many) and side loading.
The models in questions are:
App.Member = DS.Model.extend({
apiToken: DS.attr('string'),
apiTokenExpire: DS.attr('string'),
favourites: DS.hasMany('App.Presentation')
});
App.Presentation = DS.Model.extend(
{
title: DS.attr('string'),
description: DS.attr('string'),
date: DS.attr('date'),
category: DS.belongsTo('App.Category'),
tags: DS.hasMany('App.Tag'),
employees: DS.hasMany('App.Member'),
presentation: DS.belongsTo('App.File'),
presenterNotes: DS.belongsTo('App.File'),
cover: DS.belongsTo('App.Image')
});
To get the RESTAdapater to send the relation with the Member model I have:
App.APIRESTAdapter.map('App.Member', {
favourites: {embedded: 'always'}
});
When loading /members/1 the server returns:
{
"member": {
"api_token": "9fa236ad58726584d7b61bcf94b4dda37cbd3a24",
"api_token_expire": "1383832335",
"id": 1,
"favourite_ids": [ 3 ],
"group_ids": [ 2 ]
},
"presentations": [
{
"title": "That's a new one!",
"category_id": 2,
"id": 3,
"tag_ids": [ 1 ],
"employee_ids": [ 1 ]
}
]
}
But if I log get('member.favourites').mapProperty('id') I get an empty array and none of the favourites are actually added to the Member model.
If I disable the embedding of favourites on the RESTAdapter, all works fine. I am just wondering if there is something that I am missing or if there is some issues with how the JSON response is formatted?
EDIT:
Done some digging and seems that the issue comes from the fact that the relation names (favourites, employees) is different from the model names (Member, Presentation) which are used when sideloading data. Weird, since rev. 12 https://github.com/emberjs/data/blob/master/BREAKING_CHANGES.md models should be Sideload by Type.
Doing some tests I've added a new many-to-many relation for those 2 models:
App.Member gets presentations: DS.hasMany('App.Presentation')
App.Presentation get members: DS.hasMany('App.Member')
The JSON returned by the server is exactly the same, and when logging get('member.presentations') I now get the list of presentations as it should.
At this point this looks like a bug to me, but maybe am missing something? I've tried mappings on the RESTAdapater for favourites and employees but that didn't help... Maybe there is some other Adapter config that could help?
This isn't a sideloading issue but more a misunderstanding on my side about embedded data and what the configuration meant.
Since the Adapter was configured with:
App.APIRESTAdapter.map('App.Member', {
favourites: {embedded: 'always'}
});
The expected JSON response from the server is:
{
"member": {
"api_token": "b84fd204b37d3fa3cee8a2b2cac8bd4fd02635a1",
"api_token_expire": "1384027367",
"id": 1,
"favourites": [
{
"title": "Some kind of title",
"category_id": 1,
"id": 2,
"tag_ids": [ 1 , 2 ],
"employee_ids": [ 1 ]
}
]
}
}
So "favourite_ids": [ X, X, X ] should have been "favourites": [ HASH, HASH, HASH ] when records are flagged as embedded.