If i run below, comment for generating component in ember.
$ ember generate component my-new<br>
installing component<br>
create app\components\my-new.hbs<br>
**skip app/components/my-new.js<br>**
tip to add a class, run ember generate component-class my-new <br>
installing component-test <br>
create tests\integration\components\my-new-test.js<br>
It doesn't create both componentName.js and template files.
How to solve it?
Yep, it's the default behavior in Ember since Glimmer template-only components were introduced. To fix it you should add one of --component-class options, e.g.
ember generate component my-new --component-class #glimmer/component
or, use an alias ember generate component my-new -gc.
The full list of options available could be retrieved by calling ember help g
The answer is in the output
tip to add a class, run ember generate component-class my-new <br>
In your terminal, wherever you just typed ember generate component my-new, type ember generate component-class my-new
This will create the backing my-new.js file for your component.
In Ember Octane, a component doesn't require a backing .js file anymore so the default generator does not create one.
Alternatively, you could manually create the my-new.js file in your components directory with touch or copying an existing component. I can't tell you exactly where the file would go since you may / may not be colocating, using pods, etc.
Use either
ember generate component -gc my-component
to generate a glimmer component or
ember generate component -cc my-component
However notice that you *not always need a .js file. A component with just an .hbs is totally valid and even more performant (if you dont actually need the .js).
Related
I used ember generate to create a header component for a youtube video I am following. I have a few questions -
When I ran ember generate component header, the terminal responded with creating the header.hbs file in app>components, but then skips header.js in app/components. I manually created a header.js file in that directory and if I do an alert() in the js file it works.
I have the following code in my header.hbs file.
<h1>Hello There!</h1>
{{yield}}
In my application.hbs file :
<Header/>
{{outlet}}
thoughts, suggestions? Thank you for any help in advance!
Let me try to explain this a bit. Basically there are 4 kinds of components in ember.
without a .js file:
When you invoke a component ember will first look up the component class. When it does not find such a class the behavior depends on the optional feature template-only-glimmer-components. This is by default enabled for new octane apps.
If it is enabled ember will look up the component template based on some standard rules and use it, but there will be no backing class. That is pretty nice. This is also basically what you get in a octane app when you do ember g component my-component.
When template-only-glimmer-components is disabled then an implicit classic component class will automagically be created and used together with the correct template. You don't want this behavior. If you still have it you can migrate away from it by 1) creating a .js file for every component and then 2) enabling template-only-glimmer-components.
with a .js file
When a js file is found ember will get the default export of that module. Then it will look up the correct component manager. This actually depends on that export: setComponentManager should have been called on it. This is usually done in a base class as #ember/component or #glimmer/component.
But you can also write your own custom component manager.
Basically ember will then also look up the template based on that component. A public API for this is proposed in this RFC, but currently a private API is used for the so called template co-location where you place your .hbs file next to your .js file with the same name and just a different extension. This is the default in octant. Here a ember internal build-step in ember-cli basically adds your template to the .js file and uses that API. You can also see the result in a browser debugger. So when there is no default export then ember can not find your template.
I adopted a legacy project that uses EmberJS 2.5.1, and I have a component that is unable to use the JQuery UI Sortable method. The vendor folder contains jquery.ui.min.js, and ember-cli-build.js imports it.
This is what I currently have in my code:
Ember.$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
(Sortable has been simplified for example purposes...)
In Chrome's Debugger it converts to...
_ember["default"].$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
The JQuery selector works, but it cannot find the selector. I put a break point on that line, and tried $("#cute_table_of_puppies_eating_clowns tbody").sortable({}) from the console. This ends up working.
What do I need to do to properly use this function from a component?
I'm am trying to get the ember-formly addon working like the readme.md file for that addon shows. So, I:
Ran ember install ember-formly
Dumped the example form data Model() and fields into my application/controller.js file
Put the basic template data into a blank templates/application.hbs file:
{{ember-formly fields=fields model=model}}
And that gives me this error when I load it up in my browser:
Assertion Failed: Could not find component named "custom-fields/html-input" (no component or template with that name was found)
Being rather new to Ember.js I'm sure I'm missing something simple... Any ideas? Thanks!
There is no custom-fields/html-input instead use ember-formly-fields/html-input.
This addon is providing only one component ember-formly-fields/html-input and for other components you need to have implemented it.(ie., for date-picker you need to use any other addon which provides date-picker component and you can use that here)
I have a plain custom library that I want to add to my ember project. I need to use it across multiple controllers and routes, what is the standard way to do that? lib folder? as a helper? export as module?
I assume by "plain" you mean the library is not written against ember, node, AMD, ES6 or anything else-- just plain JS.
Put your libarary into the vendor directory, then add this line in your ember-cli-build.js:
app.import('vendor/your-library.js');
Then you can access it globally.
Read more here: http://www.ember-cli.com/user-guide/#standard-non-amd-asset
I'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.