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 :)
Related
I need to rerender whole page application after language has switched. I don't like to use observers for it because of performance issues.
Language switch is done by a Ember.View. I tried to rerender parentView after changing Ember.I18n.translations but running into a known bug. It works one time but Ember Inspector shows parentView has dutzend of children views of it's own afterwards. After another switch parentView got destroyed. Just like demonstrated in this JSFiddle.
Here is simplified code of my view:
export default Ember.View.extend({
templateName: 'language-switch',
languageChanged: function() {
// change language
var language = this.get('controller.language.selected');
Ember.I18n.translations = translations[language];
// rerender page
this.get('parentView').rerender();
}.observes('controller.language.selected')
});
There is also a discussion about that problem on discuss.emberjs.com. I tried the suggestions there but they don't work. Last post suggest a work-a-round to map over all views, rerender them and afterwards use a transition. I don't like that one since I am afraid getting side problems by that hack.
I am pretty sure there must be a way to do a language switch in Ember with ember-i18n but what's the right way to do that?
Update:
I tried to implement the hack from discuss.emberjs.com. It's working but it's very limited. I implement it like this in the view:
var self = this;
var currentRoute = self.get('controller.currentRouteName');
this.get('controller.target').transitionTo('loading').then(function(){
self.get('controller.target').transitionTo(currentRoute);
});
Problem is that all data stored in model is lost. I did not find a way to get the current model and use it in transition. Also query parameters are lost. That limitation makes this work-a-round unacceptable for my application.
Update App.reset():
As suggested in comment I tried to use App.reset(). It works better than transitionTo work-a-round but doesn't match all needs. If calling App.reset() queryParams aren't lost but model is reseted. I'm looking for a way to rerender application while keeping current model and queryParams.
It seems that mostly these problem is handled by a full page reload on locale change. E.q. one of the main developers of ember-i18n said so in this discussion.
Im currently working through the Ember.js Getting started Guide, but i'm using v1.0.0-rc.6.3 instead of RC3.1 as mentioned in the Guide.
Now i reached the chapter about implementing the editing of single todos, but the {{action}} handler implemented in the Guide dosn't seem to work, so my fist assumption is that the behavior of events changed.
Here is my code so far in a JSBin: http://jsbin.com/ogixej/1/edit
As you can see, when you double click a todo item a error is raised in the console:
Uncaught Error: Nothing handled the event 'editTodo'.
Could you tell me what changed an how i'm supposed to do it in a correct manner?
Since your TodoController is the controller responsible for the items you need to define this on your TodosController, like this:
Todos.TodosController = Ember.ArrayController.extend({
itemController: 'todo',
...
});
This way the editTodo function is correctly invoked. Here your working jsbin.
Hope it helps.
I recognize that this should be a comment, but my reputation is too low, yet.
While #intuitivePixel's answer is correct, and accepted, it did not work for me later in the example, during the Transitioning examples (Getting Started Guide - Adding Child Routes). Once I broke the templates apart, I had to move the itemController property from the controller and into the template, during the {{#each}}, like so:
{{#each itemController="todo"}}
...
{{/each}}
If you look closely, you can find this code in Ember's first example block, but it's not called out in the surrounding narrative, so I missed it.
I am working on a bit of code to show a D3 chart using Ember fixture data as the source for the data. The charts show up just fine on the first load of the page but if I move to a different route & then return to the first route (the one with the working chart) the chart simply disappears. So I guess my question is, how do I get the chart to appear every time the route is visited? Here is what my Route and View code looks like, will add more code if requested.
Updated with JS Bin: http://jsbin.com/ihapaz/2/edit
The route may not be getting any data when you return back to it. When using linkTo the model hooks are not fired. The setupController is called directly with the model that you pass to linkTo. However if the route depends on the model hook having fired to load it data then the view would be empty as it wouldn't have any data to render.
That's the only thing that comes to mind from the above code. Try posting a jsbin if this doesn't work.
Edit: Post jsbin
After looking at your jsbin I realized my earlier answer was incorrect. In general it is true that linkTo skips the model hook, but only if dynamic segments are present. Your route has no dynamic segments. Hence the model hook will always be called, so the view/chart is getting data correctly.
The error is in your implementation of render. The purpose of the render method is to push strings of html onto the DOM. This isn't the appropriate place for custom DOM insertion. For that you need to put things on the didInsertElement method.
I made these changes, renaming render to didInsertElement and the corresponding updateChart. Here's the updated jsbin.
I am displaying a list of Document titles on the site's sidebar area. To achieve this I created a documents property on the App.SidebarController
Document = require '../models/document'
SidebarController = Ember.Controller.extend
documents: (->
Document.find()
).property()
module.exports = SidebarController
This works fine, when I create a new Document in my application, this sidebar property get's updated automatically and I don't know why. It works no matter what I put in the .property() function. e.g.
.property('Document')
.property('App.Document')
Can somebody explain how this works? What would be the correct thing for the property() function to observe?
So you are basically saying that is works, but you would like to know why.
Here is my guess: When your controller gets rendered, your computed property gets computed for the first time and an instance of an array is returned. When you create a new Document, i think this very same array is updated (= Document is added). So it does work despite the fact, that you do not specify a dependent key on property(). This is because the right array is already in place. As i said just a guess, but this seems like an understandable explanation.
And what would be the correct thing to do?
IMHO one should not use such Data Access methods directly in a computed property. Instead you should call this Data Access method inside a Route and then assign it to the controller. This way you make sure, that the find() method gets executed when needed.
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.