I am using EmberJS 1.0.0 with Ember Data 1.0.0 beta and the latest version of the LocalStorage Adapter. When I try to load a record with a hasMany relationship from the store I get the follwing error:
ember-1.0.0.js (Line 394)
Assertion failed: You looked up the 'items' relationship on
'App.List:ember236:1' but some of the associated records were not
loaded. Either make sure they are all loaded together with the parent
record, or specify that the relationship is async (DS.attr({ async:
true }))
and ember-data.js (Line 2530)
TypeError: resolver is undefined
}).then(resolver.resolve, resolver.reject);
Quick demo app: http://jsbin.com/oKuPev/49 (watch the console)
<script type="text/x-handlebars">
List: {{name}}
<div>
{{#each items}}
{{id}} - {{name}}<br/>
{{/each}}
</div>
</script>
<script type="text/javascript">
window.App = Ember.Application.create({});
App.ApplicationAdapter = DS.LSAdapter.extend({});
var FIXTURES = {
'App.List': {
records: {
'1': { id: '1', name: 'The List', items: ['1','2'] }
}
},
'App.Item': {
records: {
'1': { id: '1', name: 'item 1', list: '1' },
'2': { id: '2', name: 'item 2', list: '1' }
}
}
}
// Store fixtures in localStorage
localStorage.setItem('DS.LSAdapter', JSON.stringify(FIXTURES));
// Models
App.List = DS.Model.extend({
name: DS.attr('string'),
items: DS.hasMany('item')
});
App.Item = DS.Model.extend({
name: DS.attr('string') ,
list: DS.belongsTo('list')
});
// Route
App.ApplicationRoute = Ember.Route.extend({
model: function() {
// Fails!!!
return this.store.find('list', 1);
}
});
</script>
I'm not sure if the problem is ember.js, ember-data.js or the LocalStorage adapter.
You need to define "items" on your model as being async in nature as ember makes separate requests for those models and then joins them together asynchronously.
App.List = DS.Model.extend({
name: DS.attr('string'),
items: DS.hasMany('item',{async:true})
});
This works if you define items as an asynchronous relationship.
item: DS.hasMany('item',{async:true})
Here's a working jsbin : http://jsbin.com/oKuPev/53/edit
Anyone else that stumbles on this thread b/c associations aren't loading (but w/o an error) notice the items: [1, 2] which associates the parent to child records.
Related
Ember novice here. I have been following along with the tutorial on the Ember website here.
I have been R&D'ing the example to the word and everything works...until I try implementing Mirage. The data just never shows up on the index.hbs page.
Here's my model hook:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('rental');
},
});
And my model: rental.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
owner: DS.attr('string'),
city: DS.attr('string'),
type: DS.attr('string'),
image: DS.attr('string'),
bedrooms: DS.attr('number')
});
My index.hbs:
<h1> Welcome to Super Rentals </h1>
We hope you find exactly what you're looking for in a place to stay.
{{#each model as |rentalUnit|}}
{{rental-listing rental=rentalUnit}}
{{/each}}
{{#link-to "about"}}About{{/link-to}}
{{#link-to "contact"}}Click here to contact us.{{/link-to}}
and lastly my app/mirage/config.js:
export default function() {
this.get('/rentals', function() {
return {
data: [{
type: 'rentals',
id: 1,
attributes: {
title: 'Grand Old Mansion',
owner: 'Veruca Salt',
city: 'San Francisco',
type: 'Estate',
bedrooms: 15,
image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
}
}, {
type: 'rentals',
id: 2,
attributes: {
title: 'Urban Living',
owner: 'Mike Teavee',
city: 'Seattle',
type: 'Condo',
bedrooms: 1,
image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
}
}, {
type: 'rentals',
id: 3,
attributes: {
title: 'Downtown Charm',
owner: 'Violet Beauregarde',
city: 'Portland',
type: 'Apartment',
bedrooms: 3,
image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
}
}]
};
});
}
I get two messages in Chrome developer console:
Mirage: Your Ember app tried to GET 'http://localhost:4200/assets/vendor.js', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?
and this warning:
WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using super-rentals#serializer:-rest:.modelNameFromPayloadKey("data"))
However it looks like the info was sucessfully retrieved as I see a:
Successful request: GET /rentals
Object {data: Array[3]}
which reflects the proper data. It just is breaking somewhere between that and the index.hbs and I am to novice to figure it out. I'm sure it's just a small misunderstanding on my part. Any help would be appreciated!
You have the wrong version of Ember Data installed. Also make sure you restart the server any time you install a dependency.
The error message that you are getting means that your application is using RESTAdapter (the default adapter for Ember Data 1.x). That is why it looks at the top-level data key and tries to singularize and find the related model.
You can update by following the instructions on the latest Ember CLI release. Or, you can npm install -g ember-cli#beta and start from scratch.
//Setup:
Ember: 1.3.2
Handlebars: 1.3.0
jQuery: 2.0.0
-----------------
MongoDB (_id's, embedded data)
I have been attempting to get a self many to many relationship like this:
//Model:
App.Post = DS.Model.extend({
title: DS.attr('string'),
content: DS.attr('string'),
links: DS.hasMany('App.Post'),
});
Links should be embedded as id's for (hopefully) obvious reasons.
After a couple of days digging around I have managed to get the app to serialise and submit the data correctly via RESTAdapter, the code I am using looks like this:
//Controller:
App.PostController = Ember.ObjectController.extend({
actions: {
addRelated: function(related) {
var links = this.content.get('links').pushObject(related);
this.content.save();
}
}
});
//Store:
App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
url: '/admin/api',
serializer: DS.RESTSerializer.extend({
primaryKey: function(type) {
return '_id';
},
addHasMany: function(hash, record, key, relationship) {
if (/_ids$/.test(key)) {
hash[key] = [];
record.get(this.pluralize(key.replace(/_ids$/, ''))).forEach(function(post) {
hash[key].push(post.get('id'));
});
}
return hash;
}
})
});
});
From what I can gather the serializer is expecting data in the form
{post: {...}, links: [{...},{...}]}
But since the link is of type post, I would rather not create an entire App.Links model if possible.
So can I map links to posts? As in
{post: {...}, posts: [{...},{...}]}
I tried adding a deserializeHasMany but it didn't get called when using App.Post.find()
I am guessing I would need to write a custom extract function that takes link_ids and extracts the posts into the record from it?
pI haven't test this but would say:
You should change your model to look like this:
App.Post = DS.Model.extend({
title: DS.attr('string'),
content: DS.attr('string'),
links: DS.hasMany('post'), //changed
});
Your JSON should be in the format:
{"posts": [{ "id":3 ... post item .... "links":[3,10]} { "id":4... post item .... "links":[4,11]}]}
All links must be included in the JSON unless already loaded.
My understanding is that you should not have to override the RESTAdapter and RESTSerializer as this should work out of the box - if it doesn't I'd first check ajax and capitalization.
I'm developing my first EmberJS app after following some tutorials as practice. It simply contains a list of 'tables', 'columns', and 'rows' similar to a database.
Link to the problematic page: http://www.kangarooelectronics.com/fakeDB/#/tables/edit/2
My issue is that when I go to remove a column I get:
Object # has no method 'deleteRecord'
As I understand this is due to the object I'm iterating through having no references to the controller because of the way I am constructing the array that I use to create my list.
Removing tables works fine, which are listed in the following fashion:
{{#each model itemController='TableList'}}
<a {{action removeTable this}}>Delete</a>
{{/each}}
I'm iterating through the columns via:
{{#each column in currentColumns itemController='TablesEdit'}}
<a {{action removeColumn column}}>Drop</a>
{{/each}}
Snippet from FIXTURES object:
FakeDB.Table.FIXTURES = [
{
id: 1,
name: 'Users',
columns: {
1:{'colId':1, 'name':'name'},
2:{'colId':2, 'name':'favorite color'},
3:{'colId':3, 'name':'phone number'}
},
// ...snip... //
I am getting 'currentColumns' via:
FakeDB.Table = DS.Model.extend({
name: DS.attr('string'),
columns: DS.attr('object'),
rows: DS.attr('object'),
currentColumns: function() {
var newColumns = $.map(this.get('columns'), function(k, v) {
return [k];
});
return newColumns;
}.property('columns'),
// ..snip.. //
Here you can see my problem... it's obvious that my 'column' isn't going to have any methods from my controller. I tried something like this:
FakeDB.Adapter = DS.FixtureAdapter.extend();
FakeDB.Adapter.map('FakeDB.Table', {
columns: {embedded: 'load'},
rows: {embedded: 'load'}
});
FakeDB.Columns = DS.Model.extend({
colId: DS.attr('integer'),
name: DS.attr('string')
});
FakeDB.Rows = DS.Model.extend({
colId: DS.attr('integer'),
name: DS.attr('string')
});
But I couldn't get {{#each column in columns}} to work with that.
Any suggestions? I'm going to read the docs again and will post back if I find a solution.
Thanks!
EDIT:
So I think I found another solution, but I'm still running into a little issue.
FakeDB.Table = DS.Model.extend({
name: DS.attr('string'),
columns: FakeDB.Columns.find().filter(function(item, index, self) {
if(item.tableID == 1) { return true; }
})
});
Still not sure what to replace 'item.tableID == 1' with so that I get items with the tableID referencing to the current page...
Columns are structured as...
FakeDB.Columns.FIXTURES = [
{
id: 1,
tableID: 1,
name: 'name'
},
// ...snip... //
But now I get:
assertion failed: Your application does not have a 'Store' property defined. Attempts to call 'find' on model classes will fail. Please provide one as with 'YourAppName.Store = DS.Store.extend()'
I am in fact defining a 'Store' property...
I'm developing my first EmberJS app after following some tutorials as practice. It simply contains a list of 'tables', 'columns', and 'rows' similar to a database.
Most databases do contain a list of tables, rows and columns. Most web applications contain a fixed set of tables with pre-defined columns and a dynamic list of rows. If this is your first ember app i would recommend starting with something that keeps you on the happy path.
I am in fact defining a 'Store' property...
True but ember is complaining because store is not available before ember app is initialized. Anything that accesses the store should be in a framework hook of some kind. It can't be used when defining your objects, which wouldn't make a lot of sense anyway.
Probably what you meant to do was make a computed property called columns like this:
FakeDB.Table = DS.Model.extend({
name: DS.attr('string'),
columns: function() {
FakeDB.Columns.find().filter(function(item, index, self) {
if(item.tableID == 1) { return true; }
})
}.property('')
});
I can't get embedded hasMany to work correctly with ember data.
I have something like this
App.Post = DS.Model.extend({
comments: DS.hasMany('App.Comment')
});
App.Comment = DS.Model.extend({
post: DS.hasMany('App.Post'),
name: attr('string')
});
And my API returns the following for GET /post:
[
{
id: 1
comments: [{name: 'test'}, {name: 'test2'}]
},
...
]
I need to send this with POST /post:
[
{
comments: [{name: 'test'}, {name: 'test2'}]
},
...
]
I want to work with Ember models and have them make the appropriate requests:
var post = App.store.createRecord(App.Post, hash_post_without_comments);
post.get('comments').createRecord(hash_comment);
App.store.commit(); // This should call the POST api
and
var posts = App.store.find(App.Post); // This should call the GET api
When I try something like post: DS.hasMany('App.Post', {embedded: true}), the GET is working but the POST is trying to make a POST for the two records not only the parent one.
EDIT : My Real use case
1- I've just built ember data from master
2- My adapter: RESTAdapter
3- The serializer: JSONSerializer
4- I added
App.MyAdapter.map('App.Join', {
columns: { embedded: 'always' }
});
5- My Models are:
App.Join = DS.Model.extend({
rowCount: DS.attr('number'),
columns: DS.hasMany('App.JoinColumn'),
});
App.JoinColumn = DS.Model.extend({
join: DS.belongsTo('App.Join')
});
6- When:
var a = App.Join.find(1);
a.get('columns').createRecord({});
App.store.commit();
a POST for joincolumn is sent and the parent is not dirty
What am i missing?
On master, the correct API is:
App.Adapter.map('App.Post', {
comments: { embedded: 'always' }
});
The two possible values of embedded are:
load: The child records are embedded when loading, but should be saved as standalone records. In order for this to work, the child records must have an ID.
always: The child records are embedded when loading, and are saved embedded in the same record. This, of course, affects the dirtiness of the records (if the child record changes, the adapter will mark the parent record as dirty).
If you don't have a custom adapter, you can call map directly on DS.RESTAdapter:
DS.RESTAdapter.map('App.Post', {
comments: { embedded: 'always' }
});
I have the exact same problem.
This bug has been reported on the ember data issue tracker.
The following PR adds 2 failing tests showing the problem: https://github.com/emberjs/data/pull/578
It seems that there is no workaround right now.
EDIT:
sebastianseilund opened a PR 2 days ago which fixes your problem.
Have a look at: https://github.com/emberjs/data/pull/629/files
Adding an update to this incase others come across this post and are having a hard time figuring out what works with the current version of ember-data.
As of Ember Data 1.0.0.beta.7, you need to override the appropriate methods on the serializer. Here's an example:
1) Reopen the serializer (credit to this post):
DS.RESTSerializer.reopen({
serializeHasMany: function(record, json, relationship) {
var hasManyRecords, key;
key = relationship.key;
hasManyRecords = Ember.get(record, key);
if (hasManyRecords && relationship.options.embedded === "always") {
json[key] = [];
hasManyRecords.forEach(function(item, index) {
// use includeId: true if you want the id of each model on the hasMany relationship
json[key].push(item.serialize({ includeId: true }));
});
} else {
this._super(record, json, relationship);
}
}
});
2) Add the embedded: 'always' option to the relationship on the model:
App.Post = DS.Model.extend({
comments: DS.hasMany('comment', {
embedded: 'always'
})
});
This is what worked for me (Ember 1.5.1+pre.5349ffcb, Ember Data 1.0.0-beta.7.f87cba88):
App.Post = DS.Model.extend({
comments: DS.hasMany('comment', { embedded: 'always' })
});
App.PostSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
comments: { embedded: 'always' }
}
});
Let's suppose I have two simple fixture files, one for the user(1) and one for the messages(2).
The Backbone Model for the messages is the following (3).
If I load the "Message Fixture", I would like to have also the related info regarding the user as specified in Message Model.
What is the proper way to active this goal in a spec view (4) by using jasmine test suite?
Please see the comments in (4) for more details.
(1)
// User Fixture
beforeEach(function () {
this.fixtures = _.extend(this.fixtures || {}, {
Users: {
valid: {
status: 'OK',
version: '1.0',
response: {
users: [
{
id: 1,
name: 'olivier'
},
{
id: 2,
name: 'pierre',
},
{
id: 3,
name: 'george'
}
]
}
}
}
});
});
(2)
// Message Fixture
beforeEach(function () {
this.fixtures = _.extend(this.fixtures || {}, {
Messages: {
valid: {
status: 'OK',
version: '1.0',
response: {
messages: [
{
sender_id: 1,
recipient_id: 2,
id: 1,
message: "Est inventore aliquam ipsa"
},
{
sender_id: 3,
recipient_id: 2,
id: 2,
message: "Et omnis quo perspiciatis qui"
}
]
}
}
}
});
});
(3)
// Message model
MessageModel = Backbone.RelationalModel.extend({
relations: [
{
type: Backbone.HasOne,
key: 'recipient_user',
keySource: 'recipient_id',
keyDestination: 'recipient_user',
relatedModel: UserModel
},
{
type: Backbone.HasOne,
key: 'sender_user',
keySource: 'sender_id',
keyDestination: 'sender_user',
relatedModel: UserModel
}
]
});
(4)
// Spec View
describe('MyView Spec', function () {
describe('when fetching model from server', function () {
beforeEach(function () {
this.fixture = this.fixtures.Messages.valid;
this.fixtureResponse = this.fixture.response.messages[0];
this.server = sinon.fakeServer.create();
this.server.respondWith(
'GET',
// some url
JSON.stringify(this.fixtureResponse)
);
});
it('should the recipient_user be defined', function () {
this.model.fetch();
this.server.respond();
// this.fixtureResponse.recipient_user is not defined
// as expected by the relation defined in (3)
expect(this.fixtureResponse.recipient_user).toBeDefined();
});
});
});
});
Take a look at this series of tutorials http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html
This is the specific part about Model testing.
Don't know if will solve your problem, but may contain precious info.
this.fixtureResponse is the source data for the model, but when the model is actually created it makes a copy of that data to an internal property. So, when Backbone Relational resolves the relation, it shouldn't change the source data object.
Did you tried with expect(this.model.get('recipient_user')).toBeDefined()?
Backbone-Relational provides the ability to either create a related model from nested entities within JSON retrieved via the model's fetch or to lazily load related models using fetchRelated.
You're providing Backbone-Relational with the message model data but no way to retrieve the user model data. You could add another response returning the appropriate related user data and call fetchRelated on the message model.
Alternatively inline the user data into the message response and the user model will be created automatically and added as a relation on the message model.