I was working on an EmberJS application developing.
I defined a route and a template for it
And there is a little button, which id is myBtn in that template
I wonder how and when i can reference that button in my route.js
If there is no way,i think i may wrote a single component and wrap it in that route(template),course,element reference in component is clearly and easily
Hope there is a hint for me
Thanks
In most cases there is no need for you to reference dom element (your button) in the route, your button and route should be loosely coupled it is how ember encourages building apps. Instead you should use actions/events to control your app or wrap it in component if you really need reference to dom.
Related
I am working on a project that I inherited from someone else, and I see a lot of <p-xxxx> tags, such as <p-page :has-something="val1" :has-another="val2" />, etc.(e.g. CompName -->
I'm looking around the directories and found a component called Page.vue that has such props in it: has-something and has-another. And structurally speaking, I'm sure the <p-page> corresponds to this component.
So how did this work? I checked the component's name field and it says Page.
EDIT:
I should also note that the component isn't registered at all. It's not imported either. I'm guessing it has something to do with
import '#/globals';
import '#/plugins';
in main.js, because I know we're using our proprietary UI component library. Can anyone point to where I can go read more about how this works? I thought I was pretty good at Vue, but apparently not good enough.
It depends on how the component is registered in the parent component, for instance, if the Page component is registered as:
components: {
PPage: Page
}
Then in the template, you'll refer to this component as <p-page ...
I figured it out.
In our proprietary library we're using, components were being exported out with p- as a prefix, and the library was injected into the whole app via vue.config.js, so there wasn't any importing in individual components.
I am new in angular 4. I found out that there is a way in angular to pass data from the parent component to the child component using #Input just like following:
<child [dataToPass]="test"></child>
My question is how to do the same thing using a router. In the router, there is no child definition like <child></child>; it only has <router-outlet></router-outlet>, so how do I pass data using #Input?
The only way is to use a shared service or use Ngrx.
Component added by the router is added as sibling to
and does not replace it
What you want to achieve is to prefetching data from component to another when transferring via router.
I highly suggest using a resolver to load the data as explained here.
This will allow you to not only pass data via the router but also will the second component/page wait till the data is fetched so you don't run in a case of "my site is loaded but no data is displayed" ;) if you need further help with the implementation feel free to comment on this and share some code in your question.
I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.
I have a component in Ember2 that receives a parameter {{my-component product=p}}. I need to pre compile the component and get the generated html.
I have tried to use ember-cli-htmlbars-inline-precompile but without success. let template = hbs"{{mycomponent product=p }};
First its important to clarify the terms. Compiling a component does not mean to produce HTML! It basically means to produce a bytecode that can be used with the glimmer runtime to produce and update DOM. Ember will never produce HTML, and this is important to understand.
If you think ember produces HTML and then gives that to the browser to render you are wrong.
Ember directly produces DOM, and then keeps track of the DOM nodes to update the DOM and allow live binding.
So basically there is no public API in ember to do what you want.
Of course you can just render the component, and use this.element.outerHTML to access the HTML. But remember that with that you will lose all ember functionality like live-binding or actions.
This is especially tricky because google maps renders all into an iframe.
ember-wormhole shows that its possible to render ember content outside the main div, but they make use of private API and I think this possibility ends with the iframe.
I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?
you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component