I have a qml app which is created via two separate ways.
1) via a c++ code during startup
2) via my main.qml as one of the tabs.
Inside the qml app I want to know who is my parent so that I can decide if I should stay on my current page or load some other qml. How to know who is the parent to take such decision?
This question is difficult to answer for a few reasons. Notably, it's not especially clear what you want. The simple answer to your question is that a QML element always has access to it's parent via the exposed parent property that exists on all objects. If your question is more complicated as it appears then you need to rephrase the question to better clarify what you actually want.
Related
I'm writing an app in Vue and I have a really hard time understanding the component hierarchy, namely the parent-child relationships and how to pass data around.
I have a view that contains a map which in turn has some navigation controls and options that are overlayed on top of the map. Now, I want these controls to manipulate the map WITHOUT having to nest the buttons inside the actual maps as it will cause severe display issues (for example, clicking on a zoom button falls through the button and also clicks the next element under it).
My app looks like this:
Mapview
Map
Controls
Options
Optionpanel1
Optionpanel2
...
Now, a HTML input element in Optionpanel1 needs to control something in the Map, which is not actually it's parent component. Also, some data from Map needs to be passed down to Optionpanel1 so it would know what to control. To make matters worse, something in Options also needs to pass something down to Optionpanel1, so, even though event bus would allow communication upwards, it would not solve that I need to pass data from parents to indirect children and also components that are not it's children.
I can actually pass the required property down the line if I nest the Options inside Map and pass it down with :myProp="prop" and then in Options, declare it in props and bind to Optionpanel1, where it is again declared as a prop. But as I mentioned earlier, nesting elements that I do not want to be nested in a visual sense causes massive issues like mouse click falling through. Do elements even need to be nested inside eachother in order to define parent-child relationship?
I would want components to exchange read-only data without Y being a child of X in the DOM. Also, even if nesting components like this would not cause visual issues, does it not seem very annoying to have to register and bind it in every component along the way?
I don't understand why is it so difficult to simply read something from another component. It's starting to seem that Vue is causing a problem that it's supposed to solve? Am I missing something here or am I looking at this in a completely wrong way?
Thanks in advance.
Basically you have 2 options to control complex components:
Handle the actions in your so-called "smart component" (in terms of React), which is the common ancestor for the controlling and controlled components. It's a pretty good solution for small components, but that's not the case.
To separate common logic and data in a Vuex store. I'd recommend you doing this.
I have strange (at least to me) problem with multiple checkboxes with v-model. When using multiple checkboxes that are v-model'ed to one property then normal array is produced which is done with code below:
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
However, when I try to move it to Single File Component I had to copy some magical tricks from Vue.js forum to make it work. I still suspect that there must be easier way to achieve it. I can’t imagine that it wasn’t solved with simple solutions since it’s quite a common pattern (checkbox in a component - nothing exotic, right?). Any help appreciated!
Here is the working jsfiddle - please have in mind that there is no errors. I just want to know if that really has to be that complicated.
The answer is, no. You may be able to do this magic differently, but it needs to be done.
Vue has to do magic behind the scenes for checkbox because unlike all the other inputs, which have a single item that gets updated, the checkbox has to manage whether the a value is in an array. This means that the listeners and values have to be patched between the wrapper and input.
I'm being using Vue.js for some months and it's have been reminding the webforms paradigm, that you used components to make a website or webapp, but with Vue.js it's a pleasure to create such things and not a whole nightmare it was with webforms.
Well, my question is if it's possible making nested components just to define some behavior on it's parent on a markup-way. Example:
<grid prop1="somevalue" prop2="somevalue">
<grid-column prop1="somevalue" prop2="somevalue">
<filter-options prop1="somevalue" prop2="somevalue">
</filter-options>
</grid-column>
</grid>
So, a particular grid component have column and the column hava a filter options.
Don't want to depend stricty to the javascript code.
Thanks in advance
EDIT: Just to add that the childs-component must not have a template. They are just to pass some props to the parent.
To answer your question
if it's possible making nested components just to define some behavior on it's parent on a markup-way
And to keep in mind your request:
Don't want to depend strictly to the JavaScript code.
The answer is no, it is not possible. Components underneath the parent can only push (emit) data to the parent after the DOM loads. So you would need to push a value that would trigger some JavaScript if you wanted to alter the html. Using JavaScript would be the only method though.
To achieve what you are asking I think it makes a lot more sense to use props on the parent component. You have a lot more flexibility and you can make it very versatile.
Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
I have an elm app designed with the Elm Architecture in mind. I've used it for all the samples in the tutorial and they work fine. I have the following components
ContainerListView
ContainerView
AddressView
RegistrationView
...
The ContainerView component is a very formatted div structure that is used to contain other views (but for now, only 1 at a time)
ContainerListView can contain multiple containerViews. It handles their presentation and positioning. You can think of it as an MDI surface
A menu from the main ui is used to add new container views to the container view list.
I'm presented with with three main questions. Two of them are
How do I create the components such that Container view can contain any other element is I pass in for example the init, update, and view functions and expect all things to be wired correctly? At the moment, the samle views I have are kinda hard-coded. They know exactly who the children is.
Some of the components require access to things like url, access token, etc. Does this always have to be passed in from main to the individual components or it can come from another source which will essentially be readonly and maybe updatable only from main?
I'm not sure if these two should be individual questions on their own. Any information on how to architect larger apps beyound hello world will also be appreciated.
I'm working on something similar! Nested controls. I too have a container object which knows about all the types that it can handle, and has basically case statements to handle each type. So I can't drop in a new control type and expect it to handle it, that requires altering the container.
As far as I know elm doesn't have type classes, which would be how I might try to handle that kind of abstraction in haskell or purescript. There's more about that here:
https://github.com/elm-lang/elm-compiler/issues/38
and here:
https://github.com/elm-lang/elm-compiler/issues/1039
The upshot appears to be that they don't know how they want to solve that problem yet, so they haven't.