Getting Started with Ember-Model: Ember.Adapter subclasses must implement findAll - ember.js

I've tried to follow along with the Ember cast video:
http://www.embercasts.com/episodes/getting-started-with-ember-model
I originally tried with the latest handlebars rc4 and ember rc6 but was receiving this error:Ember.Adapter subclasses must implement findAll
It doesn't make much sense because I can see the findAll method implementation defined in the fixture adapter source code. I tried debugging the app.js to check the App.Person.adapter but with all the gets and wrappers for mixins it wasn't very helpful.
Then I downloaded the source code from the video directly and opened the index.html in the browser and still have the same error. This was really strange since the code obviously worked for the video.
Anyways, I tried to make a jsFiddle here:
http://jsfiddle.net/YCG9b/1/
to see if someone could point out what I expect to be a trivial mistake somewhere.
jsFiddle didn't like loading ember-model.js from github so I pasted the whole thing into the JS section.
There is so little going on here that it seems this is likely an incompatibility between versions of libraries, some environmental thing, or a silly syntax error somewhere.
My understanding is that this line App.Person.adpater = Ember.FixtureAdapter.create(); somehow isn't actually putting an adapter with a findAll method on the person model, so the subsequent call of App.Person.find() is failing.

Quite embarrassing, but I misspelled adapter...
I even quoted the line of code that had the error. :(
App.Person.adapter = Ember.FixtureAdapter.create();
Anyways, here is the updated fiddle if anyone else finds this in the future:
http://jsfiddle.net/YCG9b/3/

It looks like you're mixing up Ember Model with Ember Data (they both fill the same model void). Ember data is provided by the ember core team, ember model is by Erik Bryn who also commits regularly to Ember. They are both really good.
Ember Data requires a store, and you use DS.attr and DS.Model.extend etc...
BTW, cdnjs has a ember data if you want to link it to your jsfiddle.
Here it is fixed up: http://jsfiddle.net/PX5DV/
App.Store = DS.Store.extend({
revision: 13,
adapter: DS.FixtureAdapter.create()
});
App.Person = DS.Model.extend({
id: DS.attr(),
name: DS.attr()
});

Related

Ember.JS - 'TypeError: internalModel.getRecord is not a function' when trying to reverse a collection of records

--Using Ember Data 2.7.1--
I am trying to reverse the order of a collection of records without first turning them into an array using toArray(). This collection of objects comes from the promise returned by this.store.findAll('history-item').
I want to do this the ember way instead of making them plain javascript. I am getting a TypeError: internalModel.getRecord coming from record-array.js. For some reason when it is trying to do objectAtContent(), the content it is looking seems to not have a type. Through the stack trace I can see that the object I am dealing with is [Class], class being the history-item model. A few stack calls before the objectAtContent(), the object being dealt with switches from that history-item model to some other Class object that has no type attribute.
I am able to use Ember Inspector to see my data correctly, and if I just displayed the original collection of records on my template, it shows properly.
Has anyone run into this?
Some thoughts and considerations:
-Is there anything special about how findAll() works with its promise that doesn't allow for reversal since it is reloading in the background? I do want it to keep reloading live data.
-I am using ember-cli-mirage to mock my db and endpoints and I've follow the instructions to the letter I think. I am using an unconfigured JSONAPISerializer for mirage and and a unconfigured JSONAPIAdapter for ember. Could it have anything to do with metadata that is being sent from the back? Could it have something to with the models or records not being set up? Is there something special I have to do?
Route Segment that defines model and tries to reverse it:
[note: I know it may not be convention to prep the data (ordering) in the route but I just put it in here for ease of description. I usually do it outside in the controller or component]
model(){
return this.get('store').findAll('history-item').then(function(items){
return items.reverseObjects();
}).catch(failure);
History list model declaration:
export default DS.Model.extend({
question: DS.attr('string'),
answer: DS.attr('string')
});
Ember-Cli-Mirage config.js end points:
this.get('/history-items', (schema) => {
return schema.historyItems.all();
});
Ember-Cli-Mirage fixture for history-items:
export default [
{id: 1, question: "1is this working?", answer: "Of course!"}
}
Error:
TypeError: internalModel.getRecord coming from record-array.js
This issue also happens when I try to create a save a record. The save is successful but when the model gets reloaded (and tries to reverse), it fails with the same error. It doesn't matter if I the fixture or not.
Controller:
var newHistoryItem = this.store.createRecord('history-item', {
question: question,
answer: answer
});
newHistoryItem.save().then(success).catch(failure);
The result returned from store.findAll and store.query is an AdapterPopulatedRecordArray (live array), mutation methods like addObject,addObjects,removeObject,removeObjects,
unshiftObject,unshiftObjects,pushObject,pushObjects,reverseObjects,setObjects,shiftObject,clear,popObject,removeAt,removeObject,removeObjects,insertAt should not be used.
Have a look at corresponding discussion and
Proposed PR to throw error and suggestions to use toArray() to copy array instead of mutating.
I think using toArray is fine, no need to reinvent the wheel. Even Ember's enumerable/array methods are implemented using toArray under the hood.
I like keeping transforms on controllers/components, so Routes are only concerned with [URL -> data] logic. I think here I would keep the model hook returning the server data, and use a computed property on the controller:
import Ember from 'ember';
export default Ember.Controller.extend({
reversedItems: Ember.computed('model.[]', function() {
return this.get('model').toArray().reverse();
})
});
Twiddle: https://ember-twiddle.com/6527ef6d5f617449b8780148e7afe595?openFiles=controllers.application.js%2C
You could also use the reverse helper from Ember Composable Helpers and do it in the template:
{{#each (reverse model) as |item|}}
...
{{/each}}

ember js how to remove the hash tag in my url

I have seen an answer to this question and was directed to the Ember API Docs for using the browser's history.pushState ability
Apparently I need to add this code to my router.js file
App.Router.reopen({
location: 'auto'
});
However, doing so breaks my app! It is a very simple app so far, since I am still only learning... so its basically just a default installation with only 4 templates, 4 routes. I am using Ember App Kit which, I noticed initializes the router slightly differently than the ember guides describes.
Is there something different I need to do? or is there something I am doing wrong in general?
Ok... I found the answer, for anyone who might run into this same issue.
Ember app kit seems to define the router in a variable just called Router, so I don't need to use the conventional naming requirements.
All that needs to be added to the router.js is this:
Router.reopen({
location: 'auto'
});
:D

Ember Data override find method

I need to override the find() method in ember-data to make it compatible with my app. Its not a huge modification that I have to do, but I don't know where to start.
So far when I try to do this : this.store.find('enquiry'); Ember-Data is trying to fetch information from http://localhost/enquiries instead of http://localhost/enquiry. My problem is that I don't need to get the plural of my url..
I thought also using the jquery method but, I would rather using Ember-Data for this. How can I do that ?
Another question : After this is working, is Ember-Data generate dynamically the model in the app ? Because I have a lot field in my JSON and I can't write them down manually...
Can I do something like this :
App.Store = DS.Store.extend({
adapter: '-active-model'
});
App.Enquiry = DS.Model.extend();
Thanks for your help !
This page will show you exactly how to use a custom adapter in your application. And this page will show you how to override a method in your subclass.
I didn't see your response on the Ember forum yesterday, but in my opinion, you'd still be better off writing your own adapter. It seems like you're going to do more work trying to modify the REST adapter than if you just created your own.
But if you still want to extend the rest adapter, here is how:
App.ApplicationAdapter = DS.RESTAdapter.extend({
find: () {
//...
}
}):
As for your second question, no, Ember-Data will not pick up the fields automatically. I'm pretty sure it'll throw an error if you include fields in your JSON that are not declared in the corresponding model. This is by design. If you don't know your fields at development-time, how can you use them in templates or controllers?

replaceRoute not working as expected?

I recently wanted some routes in my emberjs app not to show up in the browser history and tried to leverage the replaceRoute functionality that was introduced in the RC1. Unfortunately it doesn't make any difference at all if I use transitionToRoute or replaceRoute.
Let's say I have 3 pages and I want page 1 to be skipped when going back in history.
App = Ember.Application.create({});
App.ApplicationRoute = Ember.Route.extend({
events: {goBack:function(){window.history.back();}}
});
App.Page1Controller = Ember.Controller.extend({
goToPage2: function(){
this.replaceRoute("page2")
}
});
App.Router.map(function() {
this.route("page1");
this.route("page2");
this.route("page3");
});
I've made a little JSFiddle example for testing http://jsfiddle.net/ripcurlx/Qmnrj/3/
Am I using the replaceRoute completely wrong, or is there a better solution to prevent certain routes not to be included in the browser history?
Thanks for any hints!
Unfortunately, this only works with location: "history". Browsers have no support for updating the hash without affecting history, whereas when using history states, there is the provided replaceState method which we can utilize.

How do I upgrade revision in emberjs DS.Store

I am new to emberJS and I was wondering one thing about the DS.Store revision value.
From the documentation and Katz's peepcode video (which I highly recommend), you get a nice little error message in the console when the revision is too high, for instance:
App.store = DS.Store.create({
revision: 11,
adapter: DS.RESTAdapter.create({
namespace: 'api'
})
});
Could return:
Uncaught Error: Error: The Ember Data library has had breaking API changes since the last time you updated the library. Please review the list of breaking changes at https://github.com/emberjs/data/blob/master/BREAKING_CHANGES.md, then update your store's `revision` property to 4
I understand that, when this message is displayed, you have got to refer back to the breaking change page of the ember-data source code but I am really confused as of what it is I need to look into.
For the Revision 5 (the revision I am trying to upgrade too I guess), there are so many things and none seems to really apply to my app.
So, someone might be able to provide me with some guidance as far as what's the methodology around upgrading revision. Do you need to address the revision notes and then up the revision number (then repeat) OR does it mean that something has been broken and you need to use that revision number for the time being?
Sorry about the lengthy post, but I am trying to get out of my own confusion :)
Thanks!
nice to see you're giving ember a shot!
So that error message works the other way around - it's complaining that you're revision (5) is too low for the version of ember-data.js. Ember is forcing you to manually update your rev number to match the one that is current. Ember-data library is changing so fast, they want to make everyone is aware of breaking changes. If you are building something new just set the revision to whatever is current (as of today that's 11)
That peepcode video was good but is way out of date. Trying to follow along while using current version of ember is not going to work. Ember has changed a lot in the last several weeks and most of the tutorials/etc you'll find online have not caught up. Right now the best source of info is the guides: http://emberjs.com/guides
Also I'd recommend watching Tom Dale and Yehuda Katz presentation at Seattle Ember.js meetup last month: http://www.youtube.com/watch?v=_6yMxU-_ARs
As Michael said the tutorial is a bit out of date. I updated to the actual version of the libs (jquery, handlebars, ember and ember-data). Current revision for DS is 12
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixutreAdapter'
});