Multi-part view using ui-router - javascript

I recently posted a question on SO asking about how to structure a controller for a multipart-view where the most upvotes answer in comments was: Use ui-router.
The goal (as described in the other question) is to create a page which looks like the following:
...with this workflow:
When the page loads, a list of data1 is being fetched from api1 which then gets populated in the table at the top.
When the page loads, a list of data2 is being fetch from api2 and populated in the table to the right.
When the user clicks on a entry in the table at the top, a detail view of data1 is being populared in the left part and some fields are being highlighted in the right table
I spent the last days learning about ui-router and I'm still unable to figure out how to do this, especially due to lack of samples about ui-router.
What I got in mind:
One abstract State (root state) for the layout with a uriTemplate
3 views, (root.tableTop, root.detail, root.tableRight) with each a template and a controller (tableTop fetches api1, tableRight api2 and so on).
Directives for highlighting
But: How do they communicate with each other? How can I propagate that the user has clicked on a row on tableTop and now detail needs to update? Through $rootScope? Or should I forget about views and work with nested states?

Related

Vue router- Trigger refresh when changing dynamic route via next/previous post links in blog

I'm relatively new to Vue, and I'm working on a portfolio site that is essentially structured like a blog with single/detail views for each project, i.e. SingleProject.vue and are linked using dynamic routes based on the slug name, i.e. path: "/projects/:project_name_slug". In the template, I'm using Axios to request JSON data from a CMS, and passing the data to a post variable via a fetchPosts() function. I'm then running this.fetchPosts() on the mounted life cycle hook. On this single project view, I also have links to the next and previous projects based on the order defined in the CMS. I'm saving JSON data to respective arrays for nextPost and prevPost and then creating router links using the post slug names as follows:
<router-link
v-if="nextPost"
:to="{path: '/projects/' + nextPost.project_name_slug}"
>Next Project</router-link>
Now to get to my actual question: these links for next/previous posts work fine; but when clicked, the view does not fully refresh/transition, and all the text data—title, sidebar info, etc.— changes rapidly, but the images lag a bit while they're downloaded (see diagram below for a visual.) So, for a moment, one will see an image from the previous project alongside text info for the next one, while the new image loads. This is a bit distracting/off-putting, so I'm trying to find a way to essentially reload the view (as if one were clicking to a different [static] route altogether) when clicking on one of these links to change the dynamic route. I found this helpful SO post, which suggests adding a changing key to <router-view> to trigger a full lifecycle whenever the path changes, i.e.
<router-view :key="$route.fullPath"></router-view>
This approach works, and indeed forces the whole SingleProject view (images and all) to refresh when changing routes via the next/previous links. However, I'm wondering if there is a better/more efficient way to limit this lifecycle refresh to just the dynamic (project view) routes? I realize, as noted in that thread, this approach could impact performance by forcing the recycle on all route changes, not just those related to single project views. Please let me know if this is unclear in any way- and thanks for any insight!
If you want to earn such kind of thing you can do it by putting all needed routes into a variable which is an Object. Then you can define some logics to switch between them and apply to a component and use it globally.
Ah, by the way, You can use a good tool called Vuepress. It has its own Previous and Next link buttons. You can say it is for documentation. No you can make blogs and portfolios too. There are so many projects created with Vuepress on the internet.
And even you can change layouts, styles or create your own theme from zero.
Below you can find link to many different projects and websites.
And most of them are ready themes to use in your projects.
https://github.com/topics/vuepress-theme

Creating breadcrumbs for table navigation VUEJS

I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!

MVC 4 making a view (only single div on the particular cshtml webpage not whole webpage) dynamically changed according to the change in Database

let, I have a view in (.cshtml file) and this view's has a model which corresponds to my database class or table. In the view, I have many more different div or section.Let, inside one of the div or section I have some code which fetches data from my database table. Now suppose, I have added/changed some data in that database. I don't want to reload the webpage(view) to view the changes; however, I just want to see the changes dynamically in that particular div which fetches data from database without reloading the full webpage. I would be grateful if you provide me some solutions or redirect me to some good tutorials regarding this topic.

Angular controller structure for multipart view

I need to create this layout in a SPA using AngularJS and a web api. The workflow goes as follows:
When the controller loads, two sets of data get fetched from the api (table above and table to the left - e.g. 2 calls to api/data1 and api/data2)
As soon as the user clicks a row in the upper table, detail information gets fetched into the box on the right side (api/data1/3434/detail)
When the user clicks on certain entries from the detail information box, the related entries are being highlighted in the table to the left.
I started creating a view with everything in it, also a controller that exposes properties for all necessary stuff, but now it looks like this (pseudo)
myPageController
table1Data : Array<IData1Model>;
table2Data : Array<IData2Model>;
userSelectedFromTable1 : IData1Model;
userSelectedFromTable2 : IData2Model;
I feel this isn't really good practice. Is there a way to suborganize the parts into some kind of partial views? Subcontrollers? Or is this a common approach? What does the usual controller looks like when he's going to serve for multiple kinds of data / api endpoints?
EDIT
I should clarify that this is just one particular page (section) of a bigger app. Most parts are just frontends for one kind of data, e.g. one controller, one model, one api call etc. Think of the page as some kind of dashboard where multiple data is shown and interact with each other.
is there a way to suborganize the parts into some kind of partial views? Subcontrollers?
These parts should really be directives. You would have the left view being a directive and the right view being a directive with the controller being the glue between the two directive instances.
so an overview of the controller:
myPageController
tablesData : IData1Model[];
userSelectedTable : IData1Model;

Item modal interface

I have a list of items and want to render the item template in a modal interface.
Requirements:
the URL should update (and hence I should use a Route)
the existing list of items should still be shown in the background (hence the modal interface)
However when using a route the last used route is automatically closed.
Note that there are 6 routes which all show a list of items.
Making the item route a child of all these routes would be a bit cumbersome.
So far I've read through these API docs, without finding what I'm looking for:
http://emberjs.com/api/classes/Ember.Route.html
http://emberjs.com/guides/routing/
http://emberjs.com/api/classes/Ember.Location.html
http://emberjs.com/guides/routing/rendering-a-template/
If you dont know the answer, but have good links to share, please do
Possible solution
On IRC it was suggested to simply render a modal using the render call (see the above link). However how can I change the URL in ember without it triggering a DOM update? (related question, Change the URL without triggering a DOM update)
This is a rough example of showing a list of items and the selected item on a modal.
http://emberjs.jsbin.com/hesubejamayo/1/edit
In combination with the following post i think you may achieve what you are looking for.
Ember Routing: Reusing a resource under multiple parent routes

Categories

Resources