Using this http://wwwendt.de/tech/dynatree/
I know the answer is probably no, but I want to verify this: can a node have several parents in this component?
That would mean, that nodes with identical properties (title, icon, and other attributes) appear at different locations in the tree.
This is possible, of course.
The only restriction is: It's not allowed to have two nodes with the same key property in one tree.
I think that the behaviour would be hard to define, if nodes where really 'identical'. For example, when you activate one node that has multiple parents, would you expect all instances to be highlighted? And then, when you press [Cursor-Left]: which parent should be navigated to?
But you could add a new property like myBackendKey whith the same value for all node instances.
Yes, a node in DynaTree can have multiple parents. That is: one identical node can be assigned to more than one parent node in the same tree. I am using jQuery Dynatree Plugin v1.2.2.
I've just now encountered a situation where I've had to deal with duplicate nodes in conjunction with navigating from current node to its next/prev sibling.
Since I had dublicate nodes in the tree, the navigation was broken. When querying the tree for a node with key "abc", dynatree will give you only the first occourance of the node with that key (and not care about the remaining nodes with the same key).
Solution: To prevent this from happening, I've simply prefixed the key for duplicate nodes with a unique string.
Related
I have this weird bug with a slot that is unreliable in certain unknown cases.
Components
There are 3 hierarchical components.
The grandchild (headlessTable), which offers a slot named arrayValue.
The child (collapsableCard), which passes the slot between grandchild and parent.
The parent (orderDataCard), who decides to render a link for that slot.
Problem: Instead of rendering the link of the parent, the default slot html of the child is being rendered when new data is loaded.
Datastructure (orderDetails)
process (obj)
mark (string)
common (obj)
additionalArguments (array)
category (string)
type (string)
name (string)
value (string)
salesOrganisation (obj)
invoices (array)
invoiceAgreementId (string)
paymentType (string)
Reproduction
Stackblitz or Codesandbox
Please look at the field additionalArguments, it contains a link.
Press ALT+M to simulate fetching new data. Now, instead of rendering a link, the default slot html for that named slot is rendered instead.
You can press ALT+J to load the original data, but this time there's no link.
Initial data (ALT+J)
Loaded data (ALT+M)
Type
Equal value
mark
str
false
common
common
obj
true
salesOrganisation
salesOrganisation
obj
true
invoices (empty)
invoices
arr
false
How 2 resolve
if you uncomment line 68 in app.js (or line 73 in App.vue if you're on codesandbox), which is the field called mark
if invoices is not initially empty in app.js
if mark is removed from html in orderDataCard
if salesOrganisation is removed from html in orderDataCard
if the html in the v-for template section for invoiceItems is empty in orderDataCard
Obviously, these are not solutions.
Notes
In any case, there is no dependence or anything between any of the fields, so it's hard for me to understand why this happens and I suspect this to be a bug with vue. I already created an issue for this. However, devs won't look at the reproduction, because they think it's not minimal as #lines > 100. As soon as I delete any more meaningful lines, the bug is resolved and the removed code is not faulty, so it's very frustrating to work on this. I could still remove lines that are not meaningful, but that would make it more difficult for everyone involved to understand what data is being rendered.
Is anyone able to acknowledge the fact that this is a problem with vue and that the code is not reducible OR (I would prefer this) is anyone able to fix this?
The problem is linked to Vue handling of multiple instances of the same component. In OrderDataCard.vue you have two instances of Collapsable-Card without unique keys. In this case:
Vue uses an algorithm that minimizes element movement and tries to
patch/reuse elements of the same type in-place as much as possible.
I don't quite know how these algorithms work, and why, apparently, it reused the second instance (without a defined slot content), but, setting a unique key for these components solved the issue.
See the working code sandbox: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149.
Note: I couldn't trigger keyboard events in my browser, so I triggered them on button click.
This may not be the solution, but could help find it:
Objects
I noticed you are working with objects and turning them into arrays. Objects properties can be problematic to work with, because unlike arrays updated properties are not propagated. This is a problem with JavaScript, not Vue. Vue was only possible because of observers introduced, but objects are still not part of that.
You might run into problems when an object is partially updated.
I would suggest looking at Vue.set.
Old code of mine invokes it explicitly by window.Vue.set() for changes in object properties so Vue can propagate them correctly.
That is kind of a bug in Vue, but again stems from JavaScript itself.
Computed arrays
I'm not entirely sure but the computed arrays don't save the above issue with working with objects.
I would go the safe route and use Vue.set() when updating objects and object properties. You can still use the computed arrays then.
Otherwise the obvious: Make real arrays out of the objects instead of working with objects half the time.
this.process
Is there a good reason you are using this.process explicitly instead of the component's props? Or is that a component from a library?
Slots
Have you tried the exact same code but without using the collapsable-card? Just output the link itself? It might point to slot problems in the collapsable-card component. Maybe also partially because of the objects thing from above.
I am having an issue with a third party library.
I wrote a component to watch the position property and call the reload method to refresh the overlays on the map.
It performed normal when there is only one v-for.
But failed when there is two v-for.
How do I fix this?
Just wrap every v-for directive in it's own, dedicated parent div.
Each v-for directive expands into multiple elements. If there are multiple lists with the same parent element which need to be updated at the same time, Vue is having a hard time updating the virtual dom.
This issue does not only happen with multiple v-fors in one component; I also came across it when using multiple root elements in nuxt3. I fixed the issue by using old-style vue2 syntax: Every template contains only one child element (or v-for-directive), which contains all the content.
TL;DR: Wrapping complex contents (v-for, content of a page > 1 element, ...) in another surrounding div might solve the issue.
I'm currently trying to implement the developp the following behavior in my application embedding Cytoscape.js : I would like that when a particular child node of a compound node is grabbed, the whole compound node is grabbed.
If tried using this code but it does not work as I expect :
cy.$(mySubNodeSelector)
.on('grab', function(){
this.ungrabify();
this.parent().select();
this.parent().grabify();
});
Does anybody has an advice about how to implement this behavior ?
Thanks a lot.
Disable events on the child: http://js.cytoscape.org/#style/events
Your code doesn't do anything because (1) you're mutating grabbability after elements have been grabbed and (2) you conflate grabifying (allowing grabbing) with grabbing (a user gesture).
Refer to the http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
Both can input a Node and Return Widget?
What is the practical use of them?
registry.byNode just checks the given node and returns the widget that it belongs to.
registry.getEnclosingWidget will walk up the DOM until it finds a node that represents a widget.
This means that when given a DOM node of a widget, they will both return the same thing. See this note in the documentation about that specific case. registry.getEnclosingWidget is useful if you have a node that you know is associated with a certain widget but that it is not necessarily a root widget node itself.
I'm able to navigate from parent window to child and vice versa. When i renavigated to parent window from child window I lost the elements/objects identity of same objects in parent window. Please help me to solve this.
When u navigate from the parent window a stale element reference exception is thrown each time you interact with the previously found web elements.
In this case, although the replacement elements may look identical they are different; the driver has no way to determine that the replacements are actually the same or what's expected.
If the element has been replaced with an identical one, a useful strategy is to look up the element again.
To learn more, read this.