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?
Related
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).
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'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'm trying to get partials working in my ember project which is using ember app kit as the build tool/project structure.
But no matter what I try ember app kit's resolver is unable to find my partial.
Uncaught Error: The partial company/edit-note could not be found
My partial is within a subfolder ie:
company/_edit-note.emblem
I then tried loading the partial using emblems syntax in multiple ways:
> company/edit-note
> "company/edit-note"
> company/_edit-note
> "company/_edit-note"
I have also tried not nesting the partial but with the same result.
I noticed this issue on ember app kits repo https://github.com/stefanpenner/ember-app-kit/issues/244 and have also tried naming my partials with a prefix hyphen instead of an underscore but to no avail.
I have looked in Ember.TEMPLATES and no matter the naming convention I see the templates full path as it is ie company/_edit-note.
Any help would be greatly appreciated.
Turns out that emblem > before a partial will use vanilla handlebars.
Using ember I needed to:
= partial "company/edit-note"
Also Ember App Kit prefixes partials with the hyphen.
I have made element directive, which works with template through templateUrl parameter. This template contains fileupload input, which needs about 8 external js libraries (jquery fileupload plugin). If I have links to these js libraries in template (using standard script element), than everything works fine, but there is an error in browser console on loading:
Error: $digest already in progress
If I put the links to js libraries directly to the page, where I have my directive, there is no error, but it is not good way for reusability.
Are you trying to trigger a $digest manually?
If this is the case, I strongly recommends you to change the approach, as you should let the Angular decides the best time for a $digest. If it's not possible to change, then you should be sure you're not calling a $digest()/$apply() inside an $digest cycle. One of the ways to do so is ensuring !scope.$$phase.