Looking at the react-md component library, there are clear examples on how to draw a list of navigation items, including with dividers.
However I CAN'T find an example of how to use nested lists such as in the image pasted here. Using the <NavigationDrawer> components, what format should the navItems property be to get a nested list?
The documentation shows that this property should be an array of items that are either react elements or objects.
arrayOf(oneOfType([
element,
shape({
divider: bool,
subheader: bool,
primaryText: node
})
]))
Or... what other combinations of components could work?
The <ListItem> component has a property nestedItems, which results in an expansion list. So it's nothing to do with the <NavigationDrawer> component.
Related
By rendering the FlatList I always get the error "Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.".
I find out that the rendered item in the Text component needs to be a primitive type but I think it's rendering a string which is a primitive type.
My Code
Welcome to StackOverflow...in the future, please add code as a text snippet to make it easier to use.
The problem is that you are passing objects rather than strings into the courseGoals array. This is because the onChange handler of TextInput takes a whole event object.
Switch it to onChangeText, which passes a string, and it should work.
I have got a rather large template at the moment for my component. I want to separate aspects of this into it's own component.
However i'm struggling to pass data to this component. I still want to be able to manipulate the data within the child and have the data in the parent update. So for example if I pass in an object, and then use v-model within the child on a textbox, the changes should reflex within the parent.
So, i'd assume as I loop through the list of objects I would v-model them into my child component, like so:
Main.vue
<card v-for="quote in quotes" v-model="quote"></card>
And then of course accept the input within the new model:
Card.vue
export default {
props: [ 'input' ]
}
However i'm getting the following error and I can't really make sense of it.
You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-mode
l on an object property instead.
I am working on a web app where users can work on a project. The structure of the app is as follows:
Component A (app)
Component B1-Bn (header, footer, main window etc., children of A)
Component C1 (Input area; with inputs for the user to work on the project, child of main window)
Component C2 (Output area; canvas which shows the result based on inputs from C1. In the future also a "graphical" input area that syncs with C1. Child of main window)
Component D1-Dn (Single parts of the input area like tables, advanced input components etc. Child of C1)
Now the project that the user is working on consists of an object stored in Component A. Component Dn needs to write to the object in Component A and also C2 in the future.
I can't get the v-model on input components Dn to work. I tried to pass the data from A down to C1 via props / v-bind and then in Dn, I v-model the prop from C1 (which originates from A) to the input-field. I also tried to use the sync modifier without sucess.
I seem to have a lack of understanding of the vue logic. I come from a desktop background where you just define the scope of variables.
I also found that other vue apprentices have the same understanding problem but somehow the answers I found where not sufficient.
I want a "global" variable that can be edited by every component and is linked to elements in the DOM. What would be the best way to achieve this?
Declare your variable at data when creating Vue Object in your root component (Component A) like
var app = new Vue({
data: function(){
return {
showSetting: {}
}
},
})
Now you can access this showSetting variable in any component like
app.showSetting;
//change it in any component
app.showSetting = {a:1,b:2};
//or append new value to object
Object.assign({d:3},app.showSetting);
Thanks for the answers so far. I guess both of them work. I found another solution because now I fully understand how data is passed in vue:Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state. I will pass all data as arrays in the future, as I only want references. The only question that remains is why the programmer is not allowed to define by himself whether the data is passed by reference or not...
Source: Vue.js Guide
I am working on ExtJS 4.2 now. There are 3 ways to access DOM elements - get, select, query.
I want to know the difference between them. Why three separate methods?
we have a question here: SVO
But it doesn't give me any clear answers. Looking for something specific / detailed answer.
Will be grateful if you can help with the explanation.
Thanks in advance :-)
EDIT based on answer below:
I am not much into jQuery so can't understand through comparison. Can anyone help me with the difference between an Ext.element and a composite element?
EDIT 2:
What is Ext.dom.Element? Any different from Ext.element? and if anyone could throw some light on "Ext.fx.Anim" package?
Ext.get
Ext.get is analogous to document.getElementById in that you can provide the ID of a DOM node and retrieve that element wrapped as Ext.dom.Element. You can also provide a DOM node or an existing Element.
// Main usage: DOM ID
var someEl = Ext.get('myDivId');
// Wrap a DOM node as an Element
var someDom = document.getElementById('myDivId');
someEl = Ext.get(someDom);
// Identity function, essentially
var sameEl = Ext.get(someEl);
Ext.query
Ext.query allows you to select an array of DOM nodes using CSS/XPath selectors. This is handy when working with custom components or data views and you need a more robust selection mechanism than DOM IDs.
// Get all DOM nodes with class "oddRow" that are children of
// my component's top-level element.
var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);
Ext.select
Ext.select is essentially Ext JS's answer to jQuery's selectors. Given some CSS/XPath selector, it returns a single object representing a collection of Elements. This CompositeElement has methods for filtering, iterating, slicing the collection.
Most importantly, the CompositeElement supports chainable versions of all methods of Ext.dom.Element and Ext.fx.Anim that operate on each element in the collection, making this method very powerful.
Edit 1: An Ext.Element represents a single DOM node, while an Ext.dom.CompositeElement represents a collection of DOM nodes that can be affected through a single interface. So, given the following example:
// Set the height of each table row using Ext.query
var tableRowNodes = Ext.query('tr', document.getElementById('myTable'));
Ext.Array.each(tableRowNodes, function (node) {
Ext.fly(node).setHeight(25);
});
// Set the height of each table row using Ext.select
var compositeEl = Ext.select('#myTable tr');
compositeEl.setHeight(25);
You can see how much easier it is to work with Ext.dom.CompositeElement.
Edit 2: Ext JS supports the concept of alternate class names. Think of them as shortcuts for commonly used classes. Ext.Element is the alternate class name for Ext.dom.Element and can be used interchangeably.
Ext.fx.Anim is a class representing an animation. Usually not used directly, it is created behind the scenes when performing animations on elements or components. For example, the first parameter of Ext.Component#hide is the animation target.
From the dojo documents on dijit.registry, I see the forEach method accepts a last parameter thisObject. But it doesn't way what that object is. Is it a dijit widget or a dojo object?
I want to destroy all widgets inside an element (that will be replaced by AJAX) so they can be parsed again without conflicting id's.
dijit.registry.forEach(function(w) {
w.destroyRecursive();
}, dojo.byId("ajaxElement"));
But this destroys ALL widgets on the page...
The thisObject is the scope object to invoke the function passed in as the first parameter of forEach.
A couple of solutions you can use in this case:
1) Use dijit.findWidgets to find all the dijits in a DOM node and destroy them one by one.
dijit.findWidgets returns array of widgets which takes domnode as a parameter
2) dojo.parser.parse returns an array of all the dijits that it creates, store that array and destroy the dijits before you call dijit.parser.parse again.
3) Use dijit.registry.filter to filter out the dijits you want to keep.