EmberJS view reload with data - ember.js

I have a view in emberjs that shows results that are on the ember data store, I have a search function that updates the results in the store via rest and so on, however the issue I have is that when the store gets updated it doesn't show it on the view, unless I delete all the records and then fill them again, but if I do that, then results that would've had the same id don't show up, as they were deleted I assume and ember ignores them.
is there a way to clear out the data store without deleting them so that they can still show up?
so far these are the 2 methods I tried.
this.store.unloadAll('things');
this.store.all('things').forEach(function(record){
record.deleteRecord();
})
both have the same issue.
Thanks

Ok I figured it out, all I had to do was use unleadRecord(), lack of documentation does make it a bit harder to find, so it will just work like this
this.store.all('things').forEach(function(record){
record.unloadRecord();
})

Related

How to show all the data changes since the last commit in Ember data?

I know that Ember data's model has the isDirty attribute, but how can I use it to show a list of all the changes/deltas of the data since the last commit?
Tom Dale's talk (listen until 36:44) mentioned that it is possible to tweak the adapter(github, api) or serializer (github, api) hooks to do that. Can anyone give me an example?
current research: I'm using the local storage adapter which adds stuff to the dirty set, which I think might be what I want. It is found in the ember data store, ember data adapter, ember data relationship changes. I am trying to figure out how everything fits together to show the data changes.
If it's any help, Ember Data stores the new (unsaved) values of attributes in the model's _attributes hash. It's quite internal though so you might want to be careful with it - I would n't recommend manipulating it directly.

Update/Remove items in Ember Array

I'm doing prototype small app on emberjs for my project.
It's here - jsbin
I have a list of transactions, which are displayed to the user. User may update or delete some of it.
For example, after update - transaction general status must be change on "Done" if both user status is "Done" (see properties of App.Transaction model).
After "Remove" user action is simply remove from array :)
How it is correctly implemented in ember.js methodology with Ember Arrays?
P.S. Pay no attention to that transaction list is static, in the future I would use ajax-request on load of app for fill transaction list. Currently, statics is made for simplicity.
Thanks.
Here is your working jsbin.
I've changed a few things, instead of passing the id when updating a transaction we pass now the transaction itself, so you can call setProperties on it and set the general_status to Done. I've also changed this behavior when deleting a transaction. And when adding a transaction you where using always the same id which is not optimal, I've used Ember.uuid to get always on creation a new id for your new record.
Have a look at the changed code to see the changes.
As a side note I should mention that you overall approach is not quite following ember's conventions, but ember is flexible enough to make it work anyway :)
Let me know if this is what you where looking for.

EmberJS Model find not up-to-date with underlying store

For a simple overview screen I have a developed a route that sets up a controller that does an App.Location.find().
App.LocationsIndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', App.Location.find());
},
renderTemplate: function() {
this.render('locations.index',{into:'application'});
}
});
I naively assumed that this would simply go to the store and fetch me all the records, giving me an up-to-date view of the records.
Apparently not....
When an external process starts removing records from the database,
the App.Location.find() keeps on returning these deleted records.
(although the REST call doesn't show them anymore)
If an external
process starts adding records to the database, the
App.Location.find() picks them up.
If I delete the records form
within the Ember app itself the model is correctly updated.
How should I deal with this in my Ember app ? I'd like to have an up-to-date view on whatever is in my database. Right now I need to refresh the page (F5) to get an up to date view. Using the linkTo helpers shows me the stale data.
This seems to be yet another trivial thing that I completely missed in EmberJS. Is it somewhere mentioned in the docs why it behaves like that ? I guess there is a valid philosophy behind this behavior.
My overview screens is simply interested in showing the most up-to-date data. If a record is no longer in the DB the model should not return it anymore.
I've added a sample project in Github that is having this issues.
Try unloading all of the data from the store before you call find():
this.store.unloadAll('widget');
this.store.find('widget');
That will fully refresh your store to reflect what's on your server.
Have you tried App.Location.query() instead of App.Location.find()?

Ember: Cannot read property 'enterStates' of undefined and textfield update

I have the following problem with ember.
I have a table with a set of datas. I have an event that returns me the current element of the table. Then it opens another view by transitioning into a new state and writes the selected table data in a textfield.
click: function(e) {
var element = $(e.target).closest("td");
App.tee = element.text().trim();
var router;
router = this.get('controller.target.router');
router.transitionTo('newRoute')
As you can see I have some other routes in my router as well.
The last two routes(home and profile) are part of a nav-tab. They work perfectly beside I click on the table. Then i get the following error when i click on a tab: Uncaught TypeError: Cannot read property 'enterStates' of undefined
Ok i give it another try to explain what i wanted to do.
What i want to do is to create a table with some data (for example persons).
When i click on a specific person in the table the corresponding table-data should be shown in the textfields that appear below. Whenever i click on another person the textfields below should change to the informations of the current clicked person in the table. When i click "New" Button a more detailed Tabview appears on the right side with some additional informations. I was playing around with ember and so far i just implemented some of the views and the routing. Im stucked as i have tried to implement the event that updates the textfield below the table. It updates once but after it has transitioned into the new state(newRoute) nothing happens. I know the code is very raw, but it is just a test to understand how this works in ember.
Ok the solution was easier than i thought. The problem was not the state changing. It was more a problem of how to access the data and how to effect the change of binded data. I realised too late that i needed to understand how the variable access works in Ember and what exactly the App.initialize() method does. So App.initialize() initializes all Controller classes in the router. If you want to access any variables within a controller you have to get the access over the router like
{{view Ember.TextField valueBinding="App.router.tableController.person"}}
Secondly i wasnt familiar with the usage of the set and get methods in Ember and the difference between extend and create. I wondered before where ember instantiates my object.
So my problem had nothing to do with states it was just a totally misunderstanding of the ember framework. Im a noob thats all.
Ok, this is the first shot of the answer.
I think the main issue is just a typo gotoHome instead of goToHome in the template.
By the way I get rid of some deprecation warnings by using <button {{action }}></button> instead of Ember.Button.
There is some other warnings when I click on the table, because you are referencing some properties which don't exist.
here is the corresponding fiddle: http://jsfiddle.net/Sly7/rKw9A/25/
Since I don't understand how it should work exactly, I'm not sure of the overall behavior. I let you explain me the flow (by editing the question please).
Any other comment is welcome :)

Can't get Ember.js to render properties from objects in controller

Total Noob question here. My apologies for the simplicity, and I've skimmed hundreds of Ember-tagged posts here looking for an answer. But it appears to be too primitive for anyone to have bothered asking before...
I'm starting from scratch with Ember. I did Andy Matthews' EmberTweets tutorial, which worked fine. I'm trying to use that as a basis for my first Ember app, which is painfully simple; but I'm stuck on the most basic of steps. I appear to have a functioning controller, and am seemingly adding new objects to it successfully. But I cannot for the life of me get my view to render the properties of those objects. The basic view renders out, but not the data from the controller, which I'm just trying to access with a simple #each. I get no errors in any browser console.
Fiddle is here.
I've tried adding objects to the controller in three different ways in my example, to see if that helps. I can successfully access from the console the properties of the objects by inspecting the content array, or with something like FilterMenus.MenusController.content.objectAt(2).get('menu_name'). Apparently, the data is right where it's supposed to be.
But still nothing appears in my template when I try to render out any of the properties, such as: {{menu_name}}. What am I doing wrong, please?
As stated in the other answers, you have to declare your app as a global variable (by omitting the var).
Besides that, you are not calling this._super() inside your FilterMenus.menusController's init method. This is required to setup the Ember.ArrayController correctly, so modifying the content will work.
Besides these two issues, your code looks fine. Here's a working fiddle: http://jsfiddle.net/pangratz666/HPkHt/.
It seems like Ember's big problem with your code is that your Application is defined as a var so it can't be accessed from the template. Removing the var keyword helped.
For some reason though, that wasn't quite enough and I had to add a
this.set('content', []);
as the first line of your init function to get it to work. I've never had to do this before so I'm not sure if it's jsFiddle doing something. If anyone has some light to shed on this, I'd be keen to hear it.
Try the following:
Remove "var" from FilterMenus declaration:
FilterMenus = Em.Application.create();
Change the implementation of menusController.addMenu to be:
addMenu: function(menu) {
this.content.push(menu);
},
This got me the two menu names to show up after "Select Country" and the explanatory paragraph:
countries
countries2
Ember didn't seem to know what this.pushObject(menu); was. Pushing directly to the controller's content array will always work, though.