Develop Reference

recursive generated breadcrump from a given tree for router

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

Display react component name in attribute

While working with React, i would like to display component name in an attribute of the component. E.g. if I have a component <LoginBox /> I would like it to be rendered as
<div data-react-name="LoginBox">...</div>
But I want this to be done automatically for each transpiled component. Reason for this is automated testing when I'd check for rendered elements in HTML/DOM, currently a component is not differentiated by the name in rendered HTML.
I thought I'd write a babel plugin, but I have no idea what visitors I'd use and how to make it robust enough. I tried google for such a plugin but I have no idea how it would be called and found nothing useful.
So is there any plugin or any way to achieve this?
Thanks

Now after a year, as I'm rethinking, it should be quite easy.
For more details on writing plugins see handbook.
Use ASTexplorer to inspect what AST would your code result in. And then, for generated tree, prepare visitors. So e.g. with code:
<div><Custom some-prop="prop">Some text</Custom></div>
we would infer, that we need to use visitor JSXOpeningElement and alter node's property attribute. To this property - array we would add a new element that we would create by Babel.types.jsxAttribute(name, value). We will get the name of tag from node's property .name.name (the name string is nested inside name object). We also need to use appropriate types. So it would look like this:
module.exports = function(Babel) {
return {
visitor: {
JSXOpeningElement(path) {
const name = Babel.types.jsxIdentifier('data-testname');
const value = Babel.types.stringLiteral(path.node.name.name);
path.node.attributes.push(Babel.types.jsxAttribute(name, value));
}
}
};
};
The code is tested with the ASTExplorer.

Accessing listview index in an extensible QML application

I'm doing an extensible QML application, it means that some of the components are loaded according to the "plugins" loaded on the application.
One of the situations is the following.
I've a ListView, and some of the elements shown on the ListView delegate are loaded based on the plugins.
To create the component/object I use the functions:
Qt.createComponent and component.createObject
It works great, and I can see and interact with the qml components loaded.
However, for some of the features I need to change the listview index from inside a plugin qml file (that is loaded on a delegated), but the index is not accessible from there, and I get a simple
index is not defined
When trying to.
The code is on github: The extension file is this one: https://github.com/danielfranca/procrastinationkiller/blob/master/extensions/timerTasks/taskRow.qml
The specific part I need to access the index is on the clicked signal of mousearea of element with id playpause.
I also tried finding the ListView element, and calling the function indexAt with the x, y mouse coordinates, but it's always returning 0.
The specific code that loads the component is this one:
Component.onCompleted: {
addTaskLayout.inputObjects = Extensions.createExtensionComponent("extraInput.qml", addTaskLayout);
}
And this function is a javascript function that is in this file: https://github.com/danielfranca/procrastinationkiller/blob/master/extensions.js
Let me know if you need more details, and I would love to understand why QML don't expose the index to loaded components and why it can't find the index even with x,y coordinates.
I'm using Qt5.4, Ubuntu 14.10, Qt Creator 3.3.1

The solution is simpler than I expected.
The best way seems to be sending the index as a parameter when creating the component.
In my case the call became:
Extensions.createExtensionComponent("taskRow.qml", row, {"model":tasksModel.get(index), "index": index});
And in my plugin component I create a property with the name index as follow:
property var index: null
Now in my extension function I expect an object with a variable number of properties, and I set it in the creation of the qml element.

dijit.tree how to implement a collapse all functionality using only store?

I have a lazy loading dijit.tree which I want to reuse in many places after its data has been loaded. But if I just replace the store object in the other trees with the one which contains most data, the nodes come all expanded. I want to modify the store so that all the items are collapsed before setting it as a store in the new tree. can you tell me how to achieve this?

You cannot use the store for this, as it does not contain any information of the state of the tree nodes. This 'magic' is performed via TreeNode, see some examples here
The 'perfect solution' would be to figure out which paths you need expanded and then set the path of your tree to traverse into the wanted treenodes.
However, since your lazyloading, you need to check the state - while initializing a tree it should be UNCHECKED. However there is a cookie-functionality inbuilt which probably is kicking in, make sure to create new tree's with { persist:false }
You could also extend your tree, so that it will accept collapseChildren(TreeNode) as follows - and then call tree.set("path", [pathsArray]);
collapseChildren : function(top) {
var self = this;
if(!top || !self.model.mayHaveChildren(top.item)) return;
top.getChildren().forEach(function(n) {
if(n.item.children) {
//dojo.style(n.getParent().containerNode, { overflowY: 'hidden', overflowX: 'hidden'});
self._collapseNode(n);
self.collapseChildren(n);
}
});
},
EDIT:
If the autoExpand flag is passed to the constructor, the Tree is initially shown with all nodes expanded.
You can then call collapseAll() and expandAll() to collapse and expand the Tree, respectively.
http://livedocs.dojotoolkit.org/dijit/Tree-examples#id3

How to combine show and list functions in CouchDB?

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.