I'm trying to use moment.js in my ember.js app (built with ember-cli), I have a trouble with this error
Handlebars error: Could not find property 'formatDate' on object
I think it's same as this error How to use Custom helpers in ember-app-kit? but I already did the same approach but not working yet. Anyone got same error? Please help me to figure out.
I put
app.import('vendor/momentjs/moment.js'); in Brocfile.js
and
"moment": true in .jshintrc as in ember-cli documentation,
and I used the helper {{formatDate date}} in PostsTemplate
I created a helper app/helpers/formatDate.js
var formatDate = Ember.Handlebars.makeBoundHelper(function(date) {
return moment(date).fromNow();
});
export default formatDate;
I also tried this syntax in app/helpers/formatDate.js, but neither works and both get same error
export default Ember.Handlebars.registerBoundHelper('formatDate',function(date) {
return moment(date).fromNow();
});
I think your file name 'formatDate.js' has the wrong format. Try 'format-date.js' and it should work.
Excerpt from http://iamstef.net/ember-cli/:
Handlebars helpers will only be found automatically by the resolver if their name contains a dash (reverse-word, translate-text, etc.) This is the result of a choice that was made in Ember, to help both disambiguate properties from helpers, and to mitigate the performance hit of helper resolution for all bindings.
Use your new 'format-date' helper like this:
{{format-date "29/05/2014"}}
I ran into this symptom as well and had a different solution.
I had a helper in app/helpers/fh.js called 'fh' in order to be able to use it I needed to add it to the controller as follows
import fh from '../helpers/fh';
If I didn't have the import line I would get the following error:
"Handlebars error: Could not find property 'fh' on object"
Related
May be a silly question, but can't seem to get this right. I have some actions that I'd like to share across two controllers, so I'd like to define them in a mixin and then include them in the controllers. My syntax matches what I've seen in the guides:
mixins/shared.js.coffee
Dashboard.Shared = Ember.Mixin.create
actions:
showTab: (tab) ->
//handle action here
controllers/messages/messages_contacts_show_controller.js.coffee
Dashboard.MessagesContactsShowController = Ember.ObjectController.extend Dashboard.Shared,
Upon loading the app, I have this error:
Uncaught Error: Assertion Failed: Expected hash or Mixin instance, got [object Undefined]
I'm not sure how to load this mixin before the controller since my files are separate (ref: what is the correct way to use coffeescript with ember´s Mixins?'ve tried importing it but keep getting "reserved word" errors from coffeescript.
import { Shared } from './mixins/shared'
and
import Shared from "./mixins/shared"
What's the proper way to get a mixin to load before the controllers it will be used in??
I'm using Ember 1.8.1
Assuming you require your JS files in some main App script, the problem is most likely that "MessagesContactsShowController" sorts before "Shared". When you require with a wildcard, the files are included in alpha order. You might try moving your Shared mixin to a different folder and then changing the order of your require statements so it is processed before MessagesContactsShowController
I have wrote a highlight helper follow the ember guides.
app/helpers/highlight.js
export default Ember.Handlebars.makeBoundHelper( function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Ember.Handlebars.SafeString('<span class="highlight">' + escaped + '</span>');
});
I invoke the helper in the application template with {{highlight name}} and declare the name in application controller . When visit the index page I got this error
Assertion Failed: A helper named 'highlight' could not be found. Seems the helper is not loaded. Is there any configuration to load the helper ?
I assume that you use ember-cli, as you tagged it this way.
Plain ember and ember-cli are using different resolvers (basiclly mechanisms that search for files in proper directories) and thus have a little bit different name conventions. Helpers in ember-cli must have a dash in their name.
Take notice that if you only put the code you mentioned in your question, this file will have no information what is Ember. You still need to import Ember using modules. Very nice introduction can be found here.
To sum up, change your helper file name to one that includes a dash and the helper will be recognized across the environment.
I have started with ember and ember-cli. Ember-cli is somewhat different than Ember shown in most of the tutorials.
I can not understand what do I need to do to inherit my own custom "Route".
For example I made a file:
authenticated.coffee
and in it:
AuthenticatedRoute = Ember.Route.extend
Now I want to do the following:
make a new file called secret.coffee with:
SacretRoute = AuthenticatedRoute.extend
The best I got so far is import AuthenticatedRoute from '../routes/authenticated' which says that it included the file but says that it can not do .extend on undefined.
I do not quite understand it and I have googled all around so please if there is an answer somewhere please you can politely give me a link.
Thank you.
I am not familiar with coffee script but have you may have forgotten to export AuthenticaedRoute.
And also suggestion from stefanpenner who is creator of ember-cli. Don't hold reference of your extended route or controller just export it as
export default Ember.Route.extend();
So, I've been trying to qunit test an Ember controller, The problem is, The controller is inside a coffeeScript file, that contains multiple controllers.
Now, The ember testing guide says, In order to test a controller, I should use the 'moduleFor' helper like so:
moduleFor(fullName [, description [, callbacks]])
In my case, the full name is say: "CustomersIndexController" , But because it's included in "customers_controller.coffee" that in it self includes multiple controller, Testing it became problematic .
After an Endless digging online, I found out (Please correct me if I'm wrong) that the resolver cares only about the file name, not about the name that 'export default myModel' provides
To make it more clear, Here is my "customers_controller.coffee" :
`export { CustomersIndexController, CustomersItemController }`
CustomersIndexController = Ember.ArrayController.extend
#Code goes here ......
CustomerItemController = Ember.ObjectController.extend
#Code goes here .....
And here is the customers-controller-test.coffee file :
`import { test, moduleFor } from 'ember-qunit';`
moduleFor("controller:customers-index-controller", 'C Controller')
test "it's an App.Controller", -> ok(#subject())
I've tried all the ideas that my brain could produce...without any luck(changing the controller name from camelCase to dasherized, to absolute path, even tried importing customers_controller.coffee), But I keep getting:
Setup failed on it's a App.Controller: Attempting to register an unknown factory: `controller:customers-index-controller`
Any Help/Advice/Links are highly appreciated.
You should be able to defined it in lower camelCase.
moduleFor('controller:postsIndex', 'Posts Index Controller');
http://jsbin.com/ruhalota/1/edit
If you take a look at the documentation for the resolver with ember-cli, you'll see that it does indeed only care about the names of the files, and what is the default export of them: http://www.ember-cli.com/#using-modules
In your case, you'll need to split your controllers into multiple files, so the resolver can find and instantiate them properly. So, the two files would be:
app/controllers/customers/index.coffee
app/controllers/customers/item.coffee
This is all assuming you are using ember-cli. If you are still using ember-app-kit, you might need to adjust this slightly, but the same basic idea should apply.
I'm trying to reproduce Ember-TodoMVC with ember-cli. I'm stuck with this part.
I've created a view like this:
app/views/action-edit.coffee
ActionEditView = Ember.TextField.extend
didInsertElement: -> #$().focus()
`export default ActionEditView`
When i use it in an Emblem template directly, e. g. view "action-view", it works fine: a text field is rendered.
But emberjs.com/guides suggests creating a helper to render the view.
I found this remark: "Remember that you must register your helpers by exporting makeBoundHelper" on ember-cli website. After fiddling for a while struggling to understand how ES6 modules work, i ended up with this code that does not produce any JS errors:
app/helpers/action-edit.coffee
`import ActionEditView from 'loltodo/views/action-edit'`
`export default Ember.Handlebars.makeBoundHelper(ActionEditView)`
When i use it like this in an Emblem template: action-edit, Ember outputs this in browser console:
[✓] helper:action-edit ......................................... loltodo/helpers/action-edit vendor/ember/ember.js:3521
So i assume the helper gets hooked up fine.
The problem is that it renders blank!
I also tried this:
app/helpers/action-edit.coffee
`import ActionEditView from 'loltodo/views/action-edit'`
`export default Ember.Handlebars.helper('action-edit', ActionEditView)`
It results in error "undefined is not a function" in this line.
So the question is: how do i create a helper that render a view with ember-cli to reproduce this step of the Ember-TodoMVC tutorial?
Like Stefan says: the docs describe this so here are the steps:
from command prompt run ember generate helper "luis-highlight"
make sure your helper name has a dash.. ember-cli does not want
conflict with html tags (if no dash then it does not work).
inside helpers/luis-hightlight.js write this:
import Ember from 'ember';
export default Ember.Handlebars.makeBoundHelper(function(value) {
return new Ember.Handlebars.SafeString('<span class="hightlitht">' + value + '</span>');
});
call helper from template:
{{luis-hightlight 'embercli is great'}}
consider looking at: https://github.com/WMeldon/ember-cli-todos/blob/master/app/components/edit-todo.js it should have an idiomatic ember-cli todo setup