We have upgraded a few projects to use Ember 3.20.2 and we are working through issues and it's mostly going fine, but I have a really strange issue in one project.
We have retrieved records from the server as models, these models then get passed down a few levels through components and all the information about the model can be displayed in these components, except when we try and render one particular field on a template. The problem part of the template looks like:
<div title={{task.details.title}}>
{{task.details.title}}
</div>
and the model has the following:
details: DS.attr(),
The error that appears in the console looks like:
Uncaught TypeError: task is undefined
Ember 2
taskHelper
fnWrapper
deprecateMutationsInAutotrackingTransaction validator.js:149
fnWrapper Ember
computeTag reference.js:250
runInAutotrackingTransaction validator.js:121
track validator.js:774
compute reference.js:249
HelperRootReference reference.js:223
Ember 2
EmberHelperRootReference
_lookupHelper
...
Is details now a restricted word? Some other issue?
Edit:
Actually I think I have narrowed down what the error is. It doesn't seem to like the title being {{task.details.title}}. If I remove the title attribute everything seems to be working fine. The documentation for deprecateMutationsInAutotrackingTransaction is:
/**
* Switches to deprecating within an autotracking transaction, if one exists.
* If `runInAutotrackingTransaction` is called within the callback of this
* method, it switches back to throwing an error, allowing zebra-striping of
* the types of errors that are thrown.
*
* Does not start an autotracking transaction.
*
* NOTE: For Ember usage only, in general you should assert that these
* invariants are true.
*/
which may suggest why some title attributes are failing, but I cannot make out much from that documentation.
Related
I got the following error while developing our front-end with Ember.js:
ember Error: Compile Error: '...' is not a helper
What is the meaning of this error?
Reason
Ember throws this error if there is no component or helper with the given name is not found in your project or your dependent addons.
How to solve
You should check the name of the component or helper that you have written (possible errors are spelling errors or writing directory structure of the component incorrectly).
This twiddle shows example of this error message when the component my-component is called as {{my-component2 x=x}} instead of {{my-component x=x}} mistakenly.
This error can also happen in older (pre-Octane) versions of Ember if you have your component in all the right places, but your component doesn't have a dash in its name. As per the docs, components are required to have at least one dash in their names:
Components must have at least one dash in their name. So blog-post is an acceptable name, and so is audio-player-controls, but post is not. This prevents clashes with current or future HTML element names, aligns Ember components with the W3C Custom Elements spec, and ensures Ember detects the components automatically.
If you try to create a component without a dash in its name, Ember won't find it and will give you this error.
It appears this requirement has been lifted in more recent versions of Ember, where components start with a capital letter to distinguish them from native HTML elements.
From the documentation:
Helpers allow you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful for transforming raw values from models and components into a format more appropriate for your users.
It looks like you are using a non-defined helper. So please look through (and maybe provide) some more of your log output. You are probably using an undefined helper in one (or multiple) of your .hbs-files.
component and file name must be the same. This solution worked for me.
edited
This question is in addition to previous Handlebars with Backbone template not rendering problem in which browseser was not rendering forms at all now the problem was solved for the form but returns another error which is possibly also with the rendering.
I have an app with Backbone on front-end and Express in back-end with express-handlebars templates and I was trying to change from Underscore templating to Handlebars while still leaving backbone logic behind. So the way I did it - installing handlebars via Bower and then required it.
app.ContactView = Backbone.View.extend({
//....
template: Handlebars.compile( $('#tmpl-contact').html() ),
//....
});
instead of
app.ContactView = Backbone.View.extend({
//....
template: _.template( $('#tmpl-contact').html() ),
//....
});
But it returns errors and I don't really get what causes them.
When I try to load a page, for example:
http://192.168.33.10:3000/contact/
It doesn't shows any errors in the browser. But if I move to:
http://192.168.33.10:3000/about
which doesn't even have Backbone logic behind it returns an error:
You must pass a string or Handlebars AST to Handlebars.compile. You
passed undefined
Which means that template is compiled before the DOM loads on the page. But my Backbone script is loading after html script e. g. after the {{{body}}} element. Also if there is a problem with an order I should get this error on every, not only when moving to another.
So I think the cause is some kind of a conflict between front-end handlebars and express-handlebars on a server. How to solve this, preferably that templates to be rendered via expHbs instance?
If the only change that you made was:
template: Handlebars.compile( $('#tmpl-contact').html() ),
to:
template: _.template( $('#tmpl-contact').html() ),
it wouldn't cause the problems you're describing. As the error message told you "You passed undefined", and undefined wouldn't have worked with the Underscore code either.
It seems more likely that you changed something else, and that change caused the issue you described. However, without more code (ideally a JS Fiddle) it's hard to say what.
Problem solved by loading each Backbone part as a separate file for its route.
I have a rails 5.0.0.1 app that has model for books and for authors.
In production and development, the pages display as expected showing the book.author.name
However, in my tests, book.author is valid and as expected, but book.author.name produces an error "ActionView::Template::Error: undefined method `name' for nil:NilClass"
using byebug I found that the author_id for the book is set to 459301548 but there is no author with that id.
How does minitest handle things differently such that the error only occurs in the test environment?
I have tried moving things around and trying different ways to populate #books to use in my #books.each do |book| but the only thing that seems to work is to remove the reference to book.author.name
The error is only occurring when not logged in, but I need to check my tests to make sure that I don't get it in other cases.
I don't know why this makes a difference, but when I change the variable assignment in my controller from:
#books = Book.paginate(...)
to:
#books = Book.all.paginate(...)
The error goes away.
The pages still seems to show the correct information in development and production either way.
I have a component my-component that includes a {{view "select"}} I want to unit test. In the unit test I use moduleFor('my-component') and load the component into the DOM. The error that shows is that Assertion Failed: select must be a subclass of Ember.View which seems to originate from handlebarsGetView(). I stepped through the debugger and noticed that the container doesn't have view:select.
I feel like I'm missing something with the resolver. Why can it not locate the select view? I also tried manually adding view:select in the needs callback for the test but then I get a complaint that it cannot add view:select because it does not exist.
I think you need to use Ember.Select? I recall this one being different for some reason, and I think the core team has plans to overhaul it in the near future.
I'm using Ember built from git master. My RouteManager is not complex, but when I try to start my app, I get this error:
Uncaught TypeError: Property '1' of object , is not a function
Following the trace indicates that this is happening on the app's initialization.
This jsfiddle shows the problem, although you'll have to look in the javascript console to see the error message. My actual router will be more complex than this, but I've pared it down to the bones to try to eliminate potential error sources.
You need to update your version of Ember Data to the latest version from master, as the injection API changed.
Here is a fiddle which "works".
http://fiddle.jshell.net/Sly7/ZySzK/
I pick up an ember-data resource from another fiddle I found on stackoverflow.
The way of populating the arraycontroller is weird. Usually you pass the context in the connectOutlet method of the controller, by specifying a context (in your case, it should be Sylvius.Section.find() )
I don't know why, but doing this, I have the error 'Sylvius.Section has no method find'... perhaps an other mess due to ember-data/emberjs bad version.