CollectionView not removing ItemView with TR - ember.js

In my app, I've got a table of rows, each row containing data. When I click the "delete" button, I want it to remove the row.
The long and the short of it is that when I delete the object from the collection, the view disappears, the object disappears, but the template is left in the table.
If you move the collection view outside a table, replace all the tr's with divs, and all the td's with spans, this bug doesn't happen, and everything works smoothly.
http://emberjs.jsbin.com/EXEnUZE/4/edit
The above fiddle shows the problem. You should be able to edit the color, but if you delete one, the object itself is gone (as evidenced by the top list), and if you use the Chrome Ember Debugger on it, the view is gone, but the HTML for the row still remains.
Is this an Ember bug? Should I open an issue for it?

Admittedly I'm no pro when it comes to the collection view, but have you contemplated using an each instead? It seems to be a little less problematic.
http://emberjs.jsbin.com/EXEnUZE/9/edit
{{#each item in model}}
{{view App.PlayerView content=item}}
{{/each}}
Honestly it does seem a little buggy, the view itself did call destroy (I tried to manually call destroy on it), but it failed to remove itself from the page(maybe the collection as well, I didn't dig into it much). So you might submit a bug, or spend a little time digging into it, that's up to you. I'll keep digging into it as well and update this if I find anything.

As a extra answer, I filed a bug report on Ember for this, and got the following response: https://github.com/emberjs/ember.js/issues/3723
The suggestion of using tagName="table" on it, and then removing the tr's from inside the child views worked perfectly.

Related

EmberJS view reload with data

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();
})

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.

Ember.Select not binding data in IE8

is there possibly any reason why Ember.Select would bind in firefox/chrome/IE9 but it won't work in IE8?
i'm not able to reproduce this in a jsfiddle. but in my app, this is happening. i have a few nested views and the drop down is in the inner most layer. i verified that the data is there. the markup for the tags just won't render.
it works when i moved the dropdown up one level to the parent view.
i have another view that render a list of radio options and it's like that as well.
{{#each content}}<input type="radio">{{text}}</input>{{/each}}
(doesn't work in inner most view but works one level up in parent)
i really can't think of anything that would cause it.
any help would be appreciated. thanks!
i couldn't figure out why this is happening. my solution was to insert the options manually on didInsertElement.

Emberjs: sorting duplicates existing content

Here is a jsfiddle for the question:
http://jsfiddle.net/stargazer/a46nj/
Clicking the insert button creates an object which has a name of 'Freyda', and inserts it into the App.Dummy. However you will see that after the sorting, the page just duplicates Tom(4). It seems it is only occuring on the level of the view part: if you examine your console, you will see that the content is sorted as intended.
There was a similar question with this: EmberJS sort Array Controller of Objects. Though the problem is not precisely same, one of the comments on that post said that related bug was corrected so trying latest version would solve the problem. However in my case latest version does not help.
I need it to sort the content automatically when a new object is pushed. Is there a better way or workaround for this problem?
Just remove App.Dummy.arrayDidChange, see http://jsfiddle.net/a46nj/3/