I inherited an ember application and can't figure out how to add a component to an engine.
I tried to create the component with:
web-app$ ember g component about-profile -ir fs-engine
installing component
create lib/fs-engine/addon/components/about-profile.js
create lib/fs-engine/addon/templates/components/about-profile.hbs
installing component-test
create tests/integration/components/about-profile-test.js
installing component-addon
create lib/fs-engine/app/components/about-profile.js
I then added the following to lib/fs-engine/addon/templates/components/about-profile.hbs
<article>
<h1>Test</h1>
<p>Please work</p>
</article>
I try to invoke this component at the template file lib/fs-engine/addon/templates/gw/itemdetail.hbs
<div>{{about-profile}}</div>
It returns empty. Nothing is rendered. No error messages are displayed anywhere.
I am sure I am missing something very basic since I am new to Ember but I did read Ember Engines guide (http://ember-engines.com/guide) and Ember Component guide (https://guides.emberjs.com/v2.12.0/components/defining-a-component/).
thanks for your help!
as it turns out, I was able to resolve this issue by stopping "ember server" and then restarting it after creating the component. simple as that!
Related
This question is related to: Ember Octane How to Clear Form Errors?
I have been asking a lot of questions on how to upgrade my Ember Classic project to Ember Octane. Some users in the community have suggested that I post an Ember-Twiddle for them to see what is going on. I have tried doing that, but I cannot get it to work. This is another tool for me to learn and I am struggling a bit to make heads or tails of it while trying to also NOT post my entire project as that seems unnecessary.
Why do I not see the page links for change-password and myroute2?
https://ember-twiddle.com/364eaf05a2e1072994b61f255032eb62?openFiles=templates.application%5C.hbs%2C
The hint is the browser's console:
you first trying to extend your change-password from unknown mixin and after fixing that you'd see another error re unknown services in the change-password controllers. Comment them out and everything works.
This is a pretty newbie question. However, in EmberJS, I've found that both of the methods work for linking to the blog page in my application.
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
See my blog
Is it better to use {{link-to}} in EmberJS? How come?
The difference is that the {{link-to}} component will navigate to the specified route within the current running Ember application, while <a href="posts"> will do a new browser request to that location and re-start your Ember app at that route. You should use {{link-to}} since you'll be using the Ember internals to navigate within your single-page application and it will be a smoother user experience.
While they both can work, watch your browser closely and you'll see the anchor tag will give you a page refresh and re-launch your Ember app (though in the right location). Using a {{link-to}} will feel faster since Ember is presenting the new page via javascript rather than restarting after a page refresh. It's the difference between navigating within a single-page application, and jumping into a SPA from an external page.
While Ember does render an anchor tag in place of the {{link-to}} at run-time, it interjects to stop the default anchor tag behaviour. The docs explain it like so:
By default the {{link-to}} component prevents the default browser
action by calling preventDefault() as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(from https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
Also, with the {{link-to}} component you can pass a model directly into the route. This is a bit more advanced, but the Ember guides have some good examples.
https://guides.emberjs.com/v2.13.0/templates/links/
I need to create a web application using ember js.In which there is a need for c3 chart creation.could you please help me?thanks in advance.
You need to create a component, which will render a chart. Check an ember documentation to learn about components. This post from an official blog also should be useful, as it contains a description of new component hooks.
I've done some example apps in Ember, and now I'm ready for using it in existing application. Its traditional web application (request-response, full reload and some ajax loaded content, no rest/api things)
So lets assume I've few page (urls) like
1 abc.com/home.php
2. abc.com/support.php ,
3. abc.com/support.php?call=meeting
and so on..
so is it possible to use just one url with ember app and rest leave as such untill its ready?
PS: I did try for support.php as this.route("support",{path:"/support.php"}) and have SupportController and support.hbs template but its not working. I'm not sure how to put it in jsfiddle.
Thanks
Include your ember app only on the page that needs it, so only on abc.com/support.php
As far as ember can see, when you go to abc.com/support.php you are on the index page (of the ember app), and you will need to use the index.hbs tempate.
What is the best approach to use EAK and ember-data-tastypie-adapter?
I am currently trying the following:
Django running on localhost:7000
EAK running on localhost:8000
Added ember-data-tastypie-adapter to bower.json
Added both JS files to index.html
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_adapter.js"></script>
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_serializer.js"></script>
Created everything needed on Django side
I figured that I had to create serializers/application.js and put in it:
export default DS.DjangoTastypieSerializer.extend();
Also adapters/application.js needed adjustments:
export default DS.DjangoTastypieAdapter.extend({
serverDomain: 'http://localhost:7000',
});
Requests go to Django and responses are sent.
However in EAK this gives "Sorry, something went wrong" message without any further information (empty error message box). No errors in console either.
If I remove serializers/application.js I get similar message, in this case with information about the error:
Assertion Failed: Nested controllers need be referenced as [/django/tastypie],
instead of [_djangoTastypie].
Refer documentation: http://iamstef.net/ember-app-kit/guides/naming-conventions.html
Do I have to define defaultSerializer in adapters/application.js? If so, what is it, /django/tastypie or something else?
What am I missing to integrate ember-data-tastypie-adapter in EAK? Trouble is, I have not seen any example where EAK and tastypie would be working together.
Of course this two local server system is development environment. Production is planned like here, both API and JS is served by one Django instance.
UPDATE:
Creating deployment code by grunt dist and serving it using Django works.
I suspect that problem lies with different JSON origin.
Turns out, that EAK has API proxy option.
Updated package.json to my API settings:
"proxyURL": "http://localhost:7000",
"proxyPath": "/api/v1",
Removed custom settings from adapters/application.js.
Now running grunt server:proxy gets data from Django. And ember.js app works without errors, not being same origin was most likely the problem.