I try to create a breadcrump from a given json tree in jsfiddle http://jsfiddle.net/alaber/y1v2bosn/1/
Thats so far working and I get the full path, but how can I use this code to create a breadcrump component for my router in vuejs to navigate inside the given tree from my json?
For example that I can use the link to directly go to the path Cocker like:
Animals / Dogs / Cocker
Or did I think wrong about the router concept and how to build breadcrumbs?
Maybe its possible to build it on another way?
Like if I click on a child node, then add it to the current breadcrumb arrays as item and if I click on a child of this child add it as 2. item to the breadcrumb, like in a more static way?
thank you
Related
I started to learn JavaScript and I am creating a navigation component in svelte and needed to add some sort of CSS visualization when there is a dropdown multiple levels deep. so I can see which parents nodes are connected with my "current-item" CSS class.
the visualization I use for this project is a color.
I came up with this logic:
https://codepen.io/Digi4Care/pen/YzaJbdW
The logic I use to determine when I reach the beginning of the node:
"LI" == node?.parentNode?.parentNode?.parentNode?.nodeName
I am wondering if there is another and more efficient way to do this?
Since you're using Svelte - there's the <svelte:self> element to create such a structure recursively. This is the tutorial lesson.
When passing the file object instead of just the name to the File component, the currentFile can then be saved to a store on click. (How do you set the current-menu-item? Based on the url) This value can be used inside the Folder component to set a conditional class, if it's an ancestor.
function isAncestor(files, cF) {
return files.includes(cF) || files.some(file => file.files && isAncestor(file.files, cF))
}
class:current-ancestor={isAncestor(files, $currentFile)}
Here's a REPL with the complete example
I would like to call my own component inside nzmodal. I have tried this:
<nz-modal
[(nzVisible)]="isVisible"
nzTitle="Create relation"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()">
<app-label-relation-create>
</app-label-relation-create>
</nz-modal>
Inside label relation create I have form.
Have I add some reference in routing module? Or, are there an easier way to do it?
You can use nzContent API, nzTitle API and nzFooter API. They accept templateRef and string as input. using templateRef will solve your problem.
I have a structure:
Root component
buttons
(menu search component) - a simple input field
Widgets
(widget component )
(Cats widget) - displays what I put in menu search here.
How I pass data from menu search component to widget component?
User insert data in input field and I would like to displat in the widget field.
Do I have to call the event emitter from menu search and pass the data to buttons, and than go done widgets>Widget Child> cats component to display?
If so how do I correct pass the data? Espciall how do I pass the data downwards?
What I've currently done is used #Output to pass the data from cats to widgets, from widgets to root app.
To pass from child event I did
#Output() inputData: EventEmitter<string> = new EventEmitter<string>();
customFunction(event){
this.inputData.emit(event);
}
Than on the parent catch the event
<cats (inputData)="colorChange($event)"></cats>
until I reached Root component.
The angular guide has a bunch of tips around handling various component to component data interaction scenarios like this one.
The basic options are to chain property and output bindings between the intermediate components, use dependency injection and ViewChild decorators to 'jump' the view hierarchy and grab instances of your 'higher level' components from lower ones (dependency injection) or vice versa (ViewChild), or the use of services to pass data around (probably the best option in more varied situations due to less coupling to the view hierarchy).
See the angular docs for more info.
I'm very new to AEM and pure front end (html,css,js) so apologies for asking such a basic question. I have made 2 components parent and child. Each one of these components has a name property which I set in the dialog. I need to to be able to access the parents name property in the child component my page looks like this.
Parent Component
--parentParsys
----Child Component
------childParsys
I just need to display the parents name in the childs dialog but I can't seem to find the parents name.
Any guidance would be much appreciated. Ideally I'd like to do this in JS but I'm comfortable picking my way around a JSP.
Thanks
Attach a listener to your child component's dialog so that it will run your JavaScript when the dialog loads. That JavaScript will determine the path of the parent component based on the path of the child component. Using Apache Sling's RESTful nature, you will simply make a GET request to parent component's Resource, which will return you the properties of that resource. You can then update the current open dialog with the value that you want. All the information you need is provided in the CQ Widgets API documentation.
Attach the listener to your child dialog pointing to an external JavaScript file:
<instructions
jcr:primaryType="cq:Widget"
fieldLabel="Instructions"
xtype="displayfield">
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(field, record, path){ mynamespace.updateWithParentName(field, record, path) }"
/>
</instructions>
Add the custom JavaScript to a ClientLib available in authoring mode. That could be cq.authoring.editor, see Using Client-Side Libraries. This will run every time the dialog opens. This example makes a synchronous GET request and updates a displayfield. You will update it depending on what you want to with the data, how you want to find the parent component, and you'll also want to add null checks.
var mynamespace = {};
mynamespace.updateWithParentName = function(field, record, path) {
var parentPath = getParentPath(path);
var parentComponent = CQ.shared.HTTP.eval(CQ.shared.HTTP.noCaching(parentPath + '.json'));
var parentName = parentComponent.name; // assuming the property name is "name"
field.setValue('Parent component name is: ' + parentName);
/* Go up two levels accounting for the current component and the parsys */
function getParentPath(path) {
var parts = path.split('/');
var parentPath = parts.slice(0, parts.length - 2).join('/');
return parentPath;
}
}
I am trying to study CouchDB. Is there a way to use list functions in a show function, or vice versa? For example, can I call some list function to render a document in its show function? Or call show(id) to render a list if ids in a list function?
As of now, I do not believe there is a direct way to do so.
However, you are able to re-use code (including templates) via CommonJS modules. Although you won't be able to call a _list through a _show function, you can simulate the reverse, and use the same templates/code from a _show in your _list response.
I believe what you are trying to do is render child entities together with their parent entity. This can be achieved by having the view pass both the parent and the children to the list function in a particular order.
There is an example in the The Definitive Guide for a scenario with multiple parent entities, each having child entities. For the simpler case of only one parent, the view may emit the parent entity followed by its children, and the list function may go along the lines of:
parent_entity = getRow();
/* ... make parent_repr ... */
send(parent_repr);
while (child_entity = getRow()) {
/* ... make child_repr ... */
send(child_repr);
}
Thus, you do not have to have a separate show function for the parent.