Pass data between components that are not related on react - ajax

i'm doing a app and i have an ajax call that send the data to the server and ask the db,it retrieves me the object data.Until here everything is cool.But i want to do a route with routie to retrieve the results on it'own page. the problem is that the two component are at the same level on the hierarchy, so cant get the props of the state data 😥. I've heard about flux but it's a pretty complex architecture for the project that i'm doing. Do you guys have a good pattern to solve that ?
Very Gratefull ;)

I dont think you need Flux for this. You can not (or at least should not) pass data between Components which are on the same hierarchy level. You should read the following lines: https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
It gives you same hints on how to decide where to put your state by defining some simple rules.
Simply put the necessary logic into a common owner of your two components (so one or more level up in the hierarchy).

Related

View and ViewModel best practice

I have doubts whether every view should have its own ViewModel or should I pass the plain model where there is no need for ViewModel? (What concerns me is that if I start to mix these two concepts, then I will end up with jungle later on)
I tried to google it but no one talks about that, every post I run into just explains the purpose of ViewModel and I know that the main purpose of ViewModel is so you can pass multiple models to view.
It depends.
In many use cases the main purpose is not to expose fields to being bound on form submission that the user shouldn't be able to update. I wouldn't slavishly create them when not needed but it depends on the developers and their level of understanding on when and why you use viewmodels vs domain/ef models. Also application code base size makes a difference.
Maybe you need select lists, maybe you want to convert some properties to different types. Lots of reasons to use them. However it is more code and mapping code even if you use a tool like AutoMapper. So they cost time to implement but maybe they fix problems and save other time? Maybe they fix a security problem? Maybe doing them all the as view models helps juniors understand? Maybe you would rather do the setup of a viewmodel at start than convert code later when it is really needed?
Consistency can help but doing a bunch of extra work may not be worthwhile. Best practice for me isn't best practice for you.
Consider the costs and benefits for your project and team . E.g. maybe your project is internal and no one is going to try to hack via adding data to submission
There are couple of reason to choose ViewModel over DomainModel.
1) First thing first is the security. Imagin you have a view for changing the password. If you pass the domain model to the view. probably you are exposing a lot of properties which is not necessary and it may cause a security problem. There is no reason to expose properties like LastLoginDate, IsActive, IsEnabled, NumberOfFailedLogin and so on for just changing the password.
2) The second reason is reducing logic from the view. If you pass a Domain class to the view, Possibly you need to add some extra logic for hiding extra properties or shape it as you like or adding logic based on the route and etc.
3) Because of the architecture. Exposing domain model to the view cause tightly coupling between your presentation layer and domain model which is not good at all.

Proper wasy to handle data with Vuejs

So to help me understand something. For further info I'm using Laravel as a backend language and Vuejs as frontend.
A user wants to visit a page to view a specific project that hits the show method on my controller. The show method loads all data pertaining to that project to display on the page. This show page is made up of many different view partials and inside some of those partials are different Vue Components that will display different sets of data pertaining to the project. Is it better to just pass all the data through props to the different Vue components that are needed or just pass in the whole project as a prop and then reference the properties of the project inside the component? Or should I pass the project Id and then have methods to fetch the specific data for that component with use of the project id.
I think that the three approaches you mention are perfectly valid. It depends on how you want to structure your components.
Do you want to use "dumb" or generic components that don't know about the structure of a "project"? Then your main component should pass relevant pieces of data to the children components.
Are children components specific to "projects" and not reusable anywhere else? Then passing the project reference around and each component getting the pieces of data they are interested in is also a good strategy.
I would probably avoid last option to avoid multiple server round trips, although it can be useful in case there is a specific part of a project that takes a lot of time to retrieve (for instance a list of sub-tasks). You could split the data fetches in two or three calls to make the main view render fast while the time-consuming query is still executing and populated when available.

Keep model data sorted?

My Ember data is database-based, but Ember maintains its own copy. So while the CRUD calls return sorted data always, it gets out-of-sort in Ember when data is added. The obvious fix is to have Ember stay in sync with the database, but that seems to violate the premise of Ember, plus there's no obvious "reloadAll" call.
But there's also no obvious "sortBy" that applies from a model. I did try adding a...
phrasesSorted: Ember.computed.sort('phrases', 'phrase')
to my phrases model, but couldn't figure out how to get it referenced from the component (e.g. {{#each model.phrasesSorted as |phrase|}} doesn't do it.)
What's the Embery-way to easily present data sorted? Is this a case where I need to write a bunch more code - e.g. custom routes and controllers - to do something that seems simple, or just me missing the simple?
You use computed.sort in wrong way. Please use:
phrasesSorted: Ember.computed.sort('phrases', 'phrasesSorting'),
phrasesSorting: ['phrase']
Then referencing it via model.phrasesSorted would just work - no matter if inside controller, template, route, component or service.

Pass and get attributes from one form but more than one entity for

Most of the article's talk about how to work with the forms like <form:form> Spring tags just with one bean(entity), but in my web app I have more then one bean(actually 3 of them, wich is mirror to my data model in DB(MySql)). What I want is to put values for all of the properties in my entities classes from one form(it may be a jsp or xhtml or html, whatever).
So, I'm kinda new in Spring MVC and as far as I know it has backing object which comes with <commandName> tag in <form:form> tag and I suppose to think that it may be just one commandName backing object for each form??
Q: - Could you please tell me how to easily(or direct me to any example's) to fulfil my pleasant headache.
Q: - It also may have something to get attributes in one controller class but by different methods. Do I have to store them in session or request? I'm thinking to have ModelAndView class for store multiple attributes in map and after store them in ModelAndView (in model). What you suggest?
hope you are having a wonderful day!
I'd suggest you investigate the technique detailed here:
http://forum.springsource.org/showthread.php?58993-Need-to-Populate-Form-data-into-multiple-java-beans
Also, I'm wondering if there could be a terminology issue here. Do you mean you actually want to have just one form on your UI, with a lot of inputs, or do you really mean you want it all on one SCREEN or page? I say that as its also possible to have multiple forms on one UI screen and go that route... which in fact might be easier, as you could then break up your processing into multiple controllers.
Another consideration on the above relates to screen design... if you are going to be populating the data for several beans from one screen, potentially that could be a LOT of data and your screen could get very cluttered and hard to read. So from that standpoint it might also be better to consider breaking your input controls up into multiple (related) screens. There is a little more about that at the bottom of the article I linked above.
You can refer: https://stackoverflow.com/a/4986410/1882833
One approach would be to have a seperate class which encapsules the required objects. And then use it as a command to set and get the data.

Generating Navigation for different user types, MVC, PHP

I have this idea of generating an array of user-links that will depend on user-roles.
The user can be a student or an admin.
What I have in mind is use a foreach loop to generate a list of links that is only available for certain users.
My problem is, I created a helper class called Navigation, but I am so certain that I MUST NOT hard-code the links in there, instead I want that helper class to just read an object sent from somewhere, and then will return the desired navigation array to a page.
Follow up questions, where do you think should i keep the links that will only be available for students, for admins. Should i just keep them in a text-file?
or if it is possible to create a controller that passes an array of links, for example
a method in nav_controller class -> studentLinks(){} that will send an array of links to the helper class, the the helper class will then send it to the view..
Sorry if I'm quite crazy at explaining. Do you have any related resources?
From your description it seems that you are building some education-related system. It would make sense to create implementation in such way, that you can later expand the project. Seems reasonable to expect addition of "lectors" as a role later.
Then again .. I am not sure how extensive your knowledge about MVC design pattern is.
That said, in this situation I would consider two ways to solve this:
View requests current user's status from model layer and, based on the response, requests additional data. Then view uses either admin or user templates and creates the response.
You can either hardcode the specific navigation items in the templates, from which you build the response, or the lit of available navigation items can be a part of the additional information that you requested from model layer.
The downside for this method is, that every time you need, when you need to add another group, you will have to rewrite some (if not all) view classes.
Wrap the structures from model layer in a containment object (the basis of implementation available in this post), which would let you restrict, what data is returned.
When using this approach, the views aways request all the available information from model layer, but some of it will return null, in which case the template would not be applied. To implement this, the list of available navigation items would have to be provided by model layer.
P.S. As you might have noticed from this description, view is not a template and model is not a class.
It really depends on what you're already using and the scale of your project. If you're using a db - stick it there. If you're using xml/json/yaml/whatever - store it in a file with corresponding format. If you have neither - hardcode it. What I mean - avoid using multiple technologies to store data. Also, if the links won't be updated frequently and the users won't be able to customize them I'd hardcode them. There's no point in creating something very complex for the sake of dynamics if the app will be mostly static.
Note that this question doesn't quite fit in stackoverflow. programmers.stackexchange.com would probably be a better fit

Resources