I implemented queryFixtures in the FixtureAdapter to be able to make "more complex" queries. I did it like this (it's CoffeeScript):
App.Store = DS.Store.extend {
revision: 13
adapter: DS.FixtureAdapter.extend {
queryFixtures: (fixtures, query, type) ->
console.log fixtures.get('length') # 2
fixtures = fixtures.filter (item) ->
for prop of query
if item[prop] != query[prop]
return false
return true
console.log fixtures.get('length') # 1
return fixtures
}
}
Here is my Profile model + fixtures:
App.Profile = DS.Model.extend {
name: DS.attr('string')
businessName: DS.attr('string')
picture: DS.attr('string')
isBusiness: DS.attr('boolean')
conversations: DS.hasMany('App.Conversation')
}
App.Profile.FIXTURES = [
{
id: 1
name: 'Jon Snow'
picture: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRDMu58ECeoIUUSMNPCEwWv4QAp4fT1fxXNK5AxK15I6GsAiBLC5Rl50zuOGQsDOedXbfE'
isBusiness: false
conversations: [101, 102]
}
{
id: 2
name: 'Jaime Lannister'
picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQB_K_IfaK-da-TbwgoM1NogXSc7QPVlaxaET76D8sdMoxAd1C2WCvnsKIM8-sGFpmiPPQ'
isBusiness: true
businessName: 'Westeros Inc.'
conversations: [103]
}
]
For testing purposes, I make the query on Profile in the init method of the ApplicationRoute:
App.ApplicationRoute = Ember.Route.extend {
init: ->
profiles = App.Profile.find { isBusiness: false }
console.log profiles.get('length') # 0 ??
model: ->
return App.Profile.find()
}
As you see, I logged fixtures.get('length') at different places.
The first console.log in the adapter returns "2" which is the total amout of profiles (OK).
The second console.log in the adapter returns "1" which means the filter is working (OK).
But what I don't understand is why do the third console.log in the router return "0". It's like data is not returned correctly...
I'm not sure if I'm doing it wrong, if it's a bug in Ember Data, or if it's an expected behavior. Any ideas?
FYI, here is my Ember configuration:
Ember.VERSION : 1.0.0-rc.6
Handlebars.VERSION : 1.0.0-rc.4
jQuery.VERSION : 2.0.3
The console.log outputs length 0 because fixtureAdapter is simulating an asynchronous query. To log query result size to console, use then like:
App.ApplicationRoute = Ember.Route.extend {
init: ->
profiles = App.Profile.find { isBusiness: false }
profiles.then (data) ->
console.log 'count: ', data.get('length') # 1
model: ->
return App.Profile.find()
}
JSBIN here: http://jsbin.com/utasuh/1/edit
Related
I am trying to write a EMberjs application, using Ember-Data. also, require.js and coffeescript. despite following each and every guide and discussion I could find, i am still getting 'no model was found for' error.
here are my classes:
main.coffee (entry point for require.js):
require.config
paths:
jQuery: "../javascript/jquery-2.1.1.min"
handlebars: "../javascript/handlebars-v1.3.0"
ember: "../javascript/ember.prod"
ember_data: "../javascript/ember-data.prod",
shim:
ember:
deps: ["jQuery", "handlebars"]
exports: "Ember"
'ember_data':
deps:[ 'ember'],
exports:'DS'
require ["app", "router"], (app, Router) ->
app.deferReadiness()
Router()
app.advanceReadiness()
return
app.coffee:
define "app", ["ember", "ember_data"], (Ember) ->
window.app = Ember.Application.create()
app.ApplicationAdapter = DS.FixtureAdapter.extend()
app
router.coffee:
define "router", ["app", "ember-data", "ember", "models/person"], (app) ->
->
app.Router.map ->
#route 'home', path: "/"
#resource('person', { path: 'person'}, ->
#route('details', { path: ':slug' })
return
)
return
app.HomeRoute = Ember.Route.extend
model: ->
app.PersonRoute = Ember.Route.extend
model: () ->
return #store.find("Person")
models/person.coffee:
class app.Person extends DS.model
first: DS.attr("string")
app.Person.FIXTURES = { person: [
{
id: 1,
first: "first_1"
},
{
id: 2,
first: "first_2"
}
]}
but when i go to http://localhost:9000/#/person, i get this:
Error while processing route: person.index" "No model was found for 'Person'" "EmberError#http://localhost:9000/assets/javascript/ember.prod.js:13949:17
Store<.modelFor#http://localhost:9000/assets/javascript/ember-data.prod.js:11264:1
Store<.findAll#http://localhost:9000/assets/javascript/ember-data.prod.js:10845:20
Store<.find#http://localhost:9000/assets/javascript/ember-data.prod.js:10476:1
app.PersonRoute<.model#http://localhost:9000/assets/javascript/router.js:24:16
apply#http://localhost:9000/assets/javascript/ember.prod.js:19296:1
superWrapper#http://localhost:9000/assets/javascript/ember.prod.js:18867:15
Route<.deserialize#http://localhost:9000/assets/javascript/ember.prod.js:24467:16
applyHook#http://localhost:9000/assets/javascript/ember.prod.js:45215:16
HandlerInfo.prototype.runSharedModelHook#http://localhost:9000/assets/javascript/ember.prod.js:43237:22
UnresolvedHandlerInfoByParam<.getModel#http://localhost:9000/assets/javascript/ember.prod.js:43463:16
bind/<#http://localhost:9000/assets/javascript/ember.prod.js:45089:16
tryCatch#http://localhost:9000/assets/javascript/ember.prod.js:45538:16
invokeCallback#http://localhost:9000/assets/javascript/ember.prod.js:45550:17
publish#http://localhost:9000/assets/javascript/ember.prod.js:45521:11
#http://localhost:9000/assets/javascript/ember.prod.js:28956:9
DeferredActionQueues.prototype.invoke#http://localhost:9000/assets/javascript/ember.prod.js:679:11
DeferredActionQueues.prototype.flush#http://localhost:9000/assets/javascript/ember.prod.js:749:15
Backburner.prototype.end#http://localhost:9000/assets/javascript/ember.prod.js:135:11
createAutorun/backburner._autorun<#http://localhost:9000/assets/javascript/ember.prod.js:521:9
" ember.prod.js:15069
any idea anyone?
EDIT:
it seems like if I move the person.coffee file from /models to the same level as main and App, and change the 'define' line in the router accordingly, it works as expected. Still a mystery to me :(
I'm not 100% sure, but the problem might be in wrong formatted fixtures for App.Person.
Could you rewrite fixtures like this?
app.Person.FIXTURES = [
{
id: 1,
first: "first_1"
},
{
id: 2,
first: "first_2"
}
]
You should be defining your fixtures using reopenClass, so along these lines:
App.Documenter.reopenClass({
FIXTURES: [
{ id: 1, firstName: 'Trek', lastName: 'Glowacki' },
{ id: 2, firstName: 'Tom' , lastName: 'Dale' }
]
});
as seen in the example here http://emberjs.com/guides/models/the-fixture-adapter/
The approach you're using is out of date.
I have set up the following scaffolding for my Ember application.
window.App = Ember.Application.create({});
App.Router.map(function () {
this.resource('coaches', function() {
this.resource('coach', {path: "/:person_id"});
});
});
App.ApplicationAdapter = DS.FixtureAdapter.extend({});
App.Person = DS.Model.extend({
fname: DS.attr('string')
,lname: DS.attr('string')
,sport: DS.attr('string')
,bio: DS.attr('string')
,coach: DS.attr('boolean')
,athlete: DS.attr('boolean')
});
App.Person.FIXTURES = [
{
id: 10
,fname: 'Jonny'
,lname: 'Batman'
,sport: 'Couch Luge'
,bio: 'Blah, blah, blah'
,coach: true
,athlete: true
}
,{
id: 11
,fname: 'Jimmy'
,lname: 'Falcon'
,sport: 'Cycling'
,bio: 'Yada, yada, yada'
,coach: false
,athlete: true
}
];
I am trying to set up a route to filter the person model and return only coaches. Just to make sure I can access the data, I have simply used a findAll on the person model.
App.CoachesRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('person');
}
});
Now though, I am trying to implement the filter method detailed on the bottom of the Ember.js Models - FAQ page.
App.CoachesRoute = Ember.Route.extend({
model: function() {
var store = this.store;
return store.filter('coaches', { coach: true }, function(coaches) {
return coaches.get('isCoach');
});
}
});
The coaches route is not working at all with the new route implemented and the old one commented out. I am using the Ember Chrome extension and when using the filter route the console responds with, Error while loading route: Error: No model was found for 'coaches'. Apparently the route is not working, specifically the model. No kidding, right? What am I missing in my filter model route?
Thank you in advance for your help.
The error message is spot on- there is no CoachModel. I think you need to do this:
App.CoachesRoute = Ember.Route.extend({
model: function() {
var store = this.store;
return store.filter('person', { coach: true }, function(coaches) {
return coaches.get('isCoach');
});
}
});
I get this assertion when run the code below:
Emptying a view in the inBuffer state is not allowed and should not
happen under normal circumstances. Most likely there is a bug in your
application. This may be due to excessive property change
notifications.
Link to demo:
http://plnkr.co/edit/s3bUw4JFrJvsL690QUMi
var App = Ember.Application.create({
Store: DS.Store.extend({
revision: 4,
adapter: DS.FixtureAdapter.create()
}),
Router: Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: "/",
connectOutlets: function(router){
var person;
person = App.Person.find(657);
person.addObserver("isLoaded", function() {
return router.get('router.applicationController').connectOutlet("things", person.get("things"));
});
}
})
})
}),
ApplicationController: Em.Controller.extend(),
ApplicationView: Em.View.extend({
template: Em.Handlebars.compile("{{outlet}}")
}),
ThingsController: Em.ArrayController.extend({
thingTypes: (function() {
return App.ThingType.find();
}).property()
}),
ThingsView: Em.View.extend({
template: Em.Handlebars.compile([
'{{#each controller.thingTypes}}',
'{{this.name}}',
'{{/each}}',
'{{#each controller.content}}',
'{{this.title}}',
'{{/each}}'].join(""))
}),
//MODELS
Person: DS.Model.extend({
things: DS.hasMany('App.Thing', {
embedded: true
})
}),
Thing: DS.Model.extend({
description: DS.attr('string'),
thingType: DS.belongsTo("App.ThingType", {
embedded: true
}),
title: (function() {
return this.get("thingType.name");
}).property("description")
}),
ThingType: DS.Model.extend({
name: DS.attr("string")
})
});
App.Person.FIXTURES = [
{
id: 657,
things: [
{
id: 1,
description: "Some text",
thing_type: {
id: 1,
name: "type 1"
}
}, {
id: 2,
description: "Some text",
thing_type: {
id: 2,
name: "type 2"
}
}
]
}
];
App.ThingType.FIXTURES = [
{
id: 1,
name: "type 1"
}, {
id: 2,
name: "type 2"
}, {
id: 3,
name: "type 3"
}
];
Why is this happening?
I was having the same error while trying to load a list of dropdown values from fixtures. What resolved it was overriding queryFixtures on the fixture adapter:
App.FixtureAdapter = DS.FixtureAdapter.extend
latency: 200
queryFixtures: (records, query, type) ->
records.filter (record) ->
for key of query
continue unless query.hasOwnProperty(key)
value = query[key]
return false if record[key] isnt value
true
I probably wouldn't have figured it out had I not set the latency first. Then the error was a bit more descriptive.
a bit late I guess... but I got it to work here:
http://plnkr.co/edit/hDCT4Qy1h5aE6GjM76qp
Didn't change the logic but where its called
I modified your router like this:
Router: Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: "/",
connectOutlets: function(router) {
var person;
router.set('router.applicationController.currentPerson', App.Person.find(657));
}
})
})
})
And created an ApplicationController:
ApplicationController: Em.Controller.extend({
currentPerson: null,
currentPersonLoaded: function() {
this.connectOutlet("things", this.get("currentPerson.things"));
}.observes("currentPerson.isLoaded"),
})
I dont know if this is the output you wished but the bug vanished!
Using:
Ember commit a5d45f66e1 from Jan 3, 2013)
Ember-Data commit 508479dee7 from Jan 4, 2013
Similar to this question ('Unable to get hasMany association'), I am unable to access embedded hasMany records directly but can see them through the model's content attribute.
For JSON:
{
"ref_book_search":{
"query":"har",
"results":[
{
"publisher":{
"name":"Pangolin",
"created":"2012-09-10T18:38:27.259515",
"id":"3d2028e4fb91181e1a6e012313914f821",
"is_active":true,
"main_url":null,
"resource_uri":"/api/v1/ref_publisher/3d2028e4fb91181e1a6e012313914f821"
},
"genre":"romcom",
"id":"cc671f00fc2711e1e41612313914f821",
"resource_uri":"/api/v1/ref_book/cc671f00fc2711e1e41612313914f821",
"title":"Harry Placeholder and the Goblet of PBR"
},
{
"publisher":{
"name":"Hoof & Mouth",
"created":"2012-10-10T14:31:27.259515",
"id":"3d200e9afb9811e1a27417383914f821",
"is_active":true,
"main_url":null,
"resource_uri":"/api/v1/ref_publisher/3d200e9afb9811e1a27417383914f821"
},
"genre":"horror",
"id":"cc621f08fc2711e1b81612313914e821",
"resource_uri":"/api/v1/ref_book/cc621f08fc2711e1b81612313914e821",
"title":"Harvey Weinstein Holiday Cookbook"
}
]
}
}
And app.js (note the map statements, which were the solution suggested in the prior question):
var App = Ember.Application.create();
DS.RESTAdapter.configure("plurals", {"ref_book_search" : "ref_book_search"});
App.store = DS.Store.create({
revision: 11,
adapter: DS.RESTAdapter.create({
bulkCommits: false,
namespace: "api/v1"
})
});
DS.RESTAdapter.map('App.RefBookSearch', {
primaryKey: 'query'
});
App.store.adapter.serializer.map('App.RefBookSearch', {
results: {embeddded: 'load'}
});
App.store.adapter.serializer.map('App.RefBook', {
publisher: {embeddded: 'load'}
});
App.RefPublisher = DS.Model.extend({
name : DS.attr('string'),
created : DS.attr('date'),
isActive : DS.attr('boolean'),
mainUrl : DS.attr('string')
});
App.RefBook = DS.Model.extend({
publisher: DS.belongsTo('App.RefPublisher'),
title : DS.attr('string'),
genre : DS.attr('string')
});
App.RefBookSearch = DS.Model.extend({
query: DS.attr('string'),
results: DS.hasMany('App.RefBook')
});
App.Router.map(function(match) {
match('/').to('query'),
match('/query/:ref_book_search_id').to('query')
});
App.QueryController = Ember.Controller.extend({
bookSearch: null,
results: []
});
App.QueryRoute = Ember.Route.extend({
setupControllers: function(controller, refBookSearch) {
controller.set('bookSearch', refBookSearch)
controller.set('results', refBookSearch.get('results').content)
}
})
App.initialize();
Everything looks fine at first, just like other poster:
search = App.RefBookSearch.find('ha')
search.get('query')
// => "ha"
results = search.get('results')
results.get('firstObject') instanceof App.RefBook
// => true
But then:
results.forEach(function(result) { console.log(result.get('title')) })
// => TypeError: Cannot call method 'hasOwnProperty' of undefined
Accessing via content shows the data is there:
results.content.forEach(function(result) { console.log(result.title) })
// => Harry Placeholder and the Goblet of PBR
// => Harvey Weinstein Holiday Cookbook
Now if I try accessing directly again, I get a slightly different error:
results.forEach(function(result) { console.log(result.get('title')) })
// => undefined x 2
This may or may not be related to this bug filed a few days ago.
I feel like I've tried everything here; I hope I'm just missing something simple. Any pointers very much appreciated. Thanks.
This is what ultimately worked for me. There seems to be some order-of-operations sensitivity i.e., doing the configure and map before creating the store. Also note that adapter.map is a convenience function that performs the mapping on the serializer.
App.Adapter = DS.RESTAdapter.extend()
App.Adapter.configure("plurals", {
"ref_book_search" : "ref_book_search",
"ref_book" : "ref_book",
"ref_publisher" : "ref_publisher"
});
App.Adapter.configure('App.RefBookSearch', {
primaryKey: 'query'
});
App.Adapter.map('App.RefBookSearch', {
results: {'embedded': 'load'}
});
App.Adapter.map('App.RefBook', {
publisher: {'embedded': 'load'}
});
App.store = DS.Store.create({
revision: 11,
adapter: App.Adapter.create({
bulkCommits: false,
namespace: "api/v1"
})
});
With ember-data I'm loading all records of a model with:
App.adapter = DS.Adapter.create({
findAll: function(store, type) {
var url = type.url;
jQuery.getJSON(url, function(data) {
var ids = data.map(function(item, index, self){ return item.id });
store.loadMany(type, ids, data);
});
}
});
The didLoad method is called when each of the record has finished loading. Is there a method to call when all records have finished loading?
EDIT
Model:
App.Article = DS.Model.extend({
title: DS.attr('string'),
content: DS.attr('string'),
checkIsLoaded: function() {
if (this.get('isLoaded')){
console.log('loaded!'); // outputs `loaded` for each record
}
}.observes('isLoaded')
});
Yes, you can use findQuery, and then observe .isLoaded property on the ModelArray.
e.g:
load: ->
#set 'data', #get('store').findQuery App.MyModel, { q: '...' }
And have the observation:
loadingComplete: ( ->
#doSomeStuff() if #getPath 'data.isLoaded'
).observes 'data.isLoaded'