I am trying to learn ember.js and i started by trying to set up a simple (not so simple) mouseover, out, down example for myself.
http://jsfiddle.net/RBbpS/48/
I keep getting a "Uncaught Error: assertion failed: Unable to find view at path"
Can someone shed some light on this I am sure it is something simple.
Your first fiddle works if you declare the App as a global (without the var).
http://jsfiddle.net/Sly7/RBbpS/52/
That beeing said, if you're new to ember, I advice you to starts with reading emberjs.com (do not forget the api:), where you can find what are the handlers for a view
from the doc:
Mouse events: 'mouseDown', 'mouseUp', 'contextMenu', 'click', 'doubleClick',
'mouseMove', 'focusIn', 'focusOut', 'mouseEnter', 'mouseLeave'
Finally, the version you use here is a quite old one, I suggest you to try the latest release: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js (do not forget to include also http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js
Try mouseEnter and mouseLeave instead mouseOver and mouseOut . Refer the ember.js view events guide
Related
I have need in my Ember.js app to render a different component based on some piece of data. I've set this up via the component helper, like so:
<article class='awesome-article'>
{{component article-type}}
</article>
This works all fine and well, though naturally, if the article-type attribute doesn't match the name of any component in the application (which may happen due to fat-fingering), it gives us a nice, explicit error message:
Uncaught Error: Assertion Failed: HTMLBars error: Could not find component named "nonexistent-component" (no component or template with that name was found)
This is also great, but now I've got a smaller problem: I'd like to gracefully handle this error in the application, but I can't seem to figure out how to either catch or prevent this error. I've tried adding an error action to the parent component, but it skips right past it.
How can I go about handling this? This is probably one of those "missing something obvious" things, but my Google-fu has failed me this time.
You could create a handlebars helper that looks up if the component is registered in the container and based on this information you can display it or display some placeholder component.
If you are on at least Ember 2.3 you can use the public API they added: http://emberjs.com/api/classes/RegistryProxyMixin.html#method_hasRegistration
We have an issue that seems to be very similar to https://github.com/emberjs/ember.js/pull/9767. The error we get is the following:
Error while processing route: [route-name] Assertion Failed: You must use Ember.set() to set the 'content' property (of [route]) to 'undefined'.
So the only difference is that it complaints about 'content' instead of 'controller', and that it is trying to set it to 'undefined'. This only happens for a few users, and it seems to be mostly old Android-devices. We have managed to reproduce the error in the default browser on a device running android 2.3.4.
Does anyone have a clue to why this happens? Debugging on old android devices is a pain!
I forgot about this question on StackOverflow, and someone else in our team have committed a fix for the issue. This line of code:
return self.getJSON(self.get('dataUrl'))
.then(self.get('_modelMap').bind(self))
Have been changed to this:
return self.getJSON(self.get('dataUrl'))
.then(function(data) {
return self._modelMap(data);
})
This was done in one of our base controllers.
Handlebars was also upgraded from v1.3.0 to v2.0.0 in the same commit. Don't know if that is required for fixing the issue though.
Hopefully this can help others with the same issue :)
While in any particular case there are hints and clues on how to debug an error you get, I haven't really found a general Ember strategy.
For example, a typeError while loading a route:
Assertion failed: Error while loading route: TypeError: 'undefined' is not an object (evaluating 'window.router.lander') (ignore the fact that I'm trying to access window.router.lander. It's irrelevant)
Why does Ember not tell you which route it's loading when this error happens? Or whether it happens in afterModel(), or activate()? And what's the general strategy for finding that sort of context info?
So far all I've got is adding a bunch of console.logs scattered around. For example with the error above:
1) Find all occurrences of window.router.lander in my code
2) before the first occurrence, add a console.log('is it the first occurrence?'), and after the first occurrence put a console.log('its not the first occurrence')
3) Do the same for every occurrence
4) refresh. One of the 'is it the nth occurrence?' won't have a closer, and now you know where the error happened.
For better debugging, you can enable transitions logging by create app with LOG_TRANSITIONS and/or LOG_TRANSITIONS_INTERNAL properties:
window.App = Ember.Application.create({
// Basic logging, e.g. "Transitioned into 'post'"
LOG_TRANSITIONS: true,
// Extremely detailed logging, highlighting every internal
// step made while transitioning into a route, including
// `beforeModel`, `model`, and `afterModel` hooks, and
// information about redirects and aborted transitions
LOG_TRANSITIONS_INTERNAL: true
});
Referenece: http://emberjs.com/guides/understanding-ember/debugging/
Also, you can use canary build which provide detailed error stack:
http://emberjs.com/builds/#/canary
Ember isn't particularly helpful when it comes to errors in the model hook, or the promises it returns. I'm sure I've read in one of the issues (or http://discuss.emberjs.com/ I'm not sure) that this is an open issue in which they're working.
What I do is use the Chrome Developer Tools to debug the issue (instead of just console loggin it). From my experience it's usually:
you're not returning anything in the model hook
an error inside one of the then functions on the promise the model hook returns
I hope it helps you!
I have a Container view that I am using as my main wrapper view, in which other views are swapped in and out.
In Ember 0.9.8 this worked fine. However, now in Ember 1.0pre I get an error when I try to swap in a view that I had previously swapped out.
Here's my basic code:
App.globalView = Ember.ContainerView.create({
screenOne: App.screenOne.create(),
screenTwo: App.screenTwo.create()
});
App.globalView.set('currentView', App.globalView.get('screenOne')); // <-- good
App.globalView.set('currentView', App.globalView.get('screenTwo')); // <-- good
App.globalView.set('currentView', App.globalView.get('screenOne')); // <-- BAD
I now get the error
Error: assertion failed: calling set on destroyed object
...from
Ember.ContainerView.Ember.View.extend.initializeViews
set(view, '_parentView', parentView);
I have an example of this at http://jsfiddle.net/SamFent/WmfTX/. In the jsFiddle, I don't see the error but the previous view just fails to load.
Does anyone know what's going on?
Ember.ContainerView now destroys the view when it is unset, so it cannot be used as you want. Here is a fork of your fiddle that does what you want: http://jsfiddle.net/WmfTX/1/
If you really need to avoid tearing down and recreating views, render both views and use the isVisible property to toggle visibility instead.
I am trying to work out how best to split up my Ember.js statechart into multiple files.
Using SproutCore we needed to use SC.State.plugin('statename') to associate a state we defined in another file with our main statechart.
I saw no such functionality in Ember, so instead I simply added a new state to my statemanager's states hash. (See also my jsFiddle)
App.statemanager = Ember.StateManager.create({
stateOne: Ember.State.create(....)
})
// new file:
App.statemanager.states.stateTwo = Ember.State.create(....)
At first this seemed to work -- I was able to transition to the new state I defined. However, I discovered that I was not able to transition out of this state using an action:
App.statemanager.states.stateTwo = Ember.State.create({
doSomething: (manager) {
manager.transitionTo("stateOne");
}
)}
App.statemanager.send("doSomething"); // throws error when trying to transition
The error I get locally is
Uncaught Error: assertion failed: You need to provide an object and key to `get`.
Ember.StateManager.Ember.State.extend.findStatesByRoute
The error I get in my jsFiddle is
Uncaught TypeError: Cannot read property 'length' of undefined
Ember.StateManager.Ember.State.extend.contextFreeTransition
Ember.StateManager.Ember.State.extend.transitionTo
Does anyone know why this is happening, and what the correct way to break up a statechart is?
Instead of trying to edit or add to an already created State Manager you should build up the individual states and then combine them all when building your state chart.
For example: http://jsfiddle.net/a6wHt/5/
App.Statemanager = Ember.StateManager.extend({
initialState: 'stateOne',
stateOne: App.StateOne,
stateTwo: App.StateTwo,
stateThree: App.StateThree,
stateFour: App.StateFour
});
Also, I used extend to build the 'class' and then instantiated at the end with create. I think it is a good idea to get in the habit of doing this, even if you treat your state chart as a singleton. It makes your code easier to test later down the line.