I am having some issues with a third level nested view/route using ui-router. I am essentially developing a site admin panel for all the sites I manage. on the "tools" page you first have to select an environment which populates the "sites" view and dropdown box once a site is selected you should get the "selected" view and panel which will contain all the site specific info. The issue I am having is the "selected" panel shows up when the "sites" panel shows up (without having selected a site yet).
My real question is this what is the proper way to setup multiple nested views using ui-router? do all the view get specified under each state? also is it ok to change the URL with a view change or should the url only be altered during a state change. I think I am mixing up states and views. I know that what I really want is a "tools" state/page with multiple views (one for each set of options).
even if someone could just provide some links to good tutorials on nested views and routes using ui-router that would be awesome.
I will try to setup a plunker to demonstrate what I am trying to do, but it has proved difficult so far being that I started with ng-boilerplate for this project
I found the following video on egghead.io which got me to understand the basics of ui-router. https://egghead.io/lessons/angularjs-introduction-ui-router
Not sure how I didn't find this before asking my question. Maybe I should look harder next time.
UPDATE:
Also after doing some further research, I determined what I was really in need of was an abstract state, and was also able to find some info on that via egghead.io (its pro content, but I had been meaning to sign uo anyway) https://egghead.io/lessons/angularjs-ui-router-abstract-states
Related
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
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!
I am very new to frontend development. I have created an ember app which has a feed page. The feed page is mainly consists of images and their associated likes and comments. Now what I want is when I click on images it should open the original size image and its likes and comments (Very much similar to Facebook's feed, when you click on images it opens a new window or card in which all information about it is present). Pinterest has similar behavior. How can I achieve the same thing? I am not very sure where look or start. Please give some examples and demos so that I can have a better understanding.
You can use the ember addon ember-modal-dialog for a straight forward way to achieve the 'new window' you are referring to. See the demo here. In general, Ember Observer is a good place to check for ember addons - particularly UI components that you can quickly leverage.
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
I'm attempting to use Ember.js for a small demo site for viewing gigapans of macroinvertebrates (e.g. like this one). Each is categorized one the site by taxonomic rank, in this case only order, family, and genus (since they're all of the same class and we don't have species-level identification). It's a small site, only 13 genera. Here's a simple working example with nothing but navigation:
http://jsbin.com/ihapaw/10
The home page lists all three orders, and under each are the families, and then genera. Click around a bit and you'll see that I'm using dynamic segments to get an URL scheme that follows a /ORDER_ID/FAMILY_ID/GENUS_ID pattern.
What I'd like to add now is a menu from which the user could choose to jump to any rank or genus. The design calls for a menu button which the user would click, a div would appear with a listing of all the orders, families, and genera, and the user could click to jump to the page they want. Populating the menu panel, making it appear onclick, and so on is not a problem. What I'm having a trouble with is that using the links in the menu end up resulting in Ember errors that I can't make any sense of. Here's an updated demo:
http://jsbin.com/ihapaw/14
In that demo, pretend the blue area is the menu panel that appears after clicking a menu button. If you open the JavaScript console, and then click the "Brachycentrus" genus in the blue menu area, and then click the "Tallaperla" genus (the very last one) in the menu area, you'll see the following errors in the console:
Error while loading route: TypeError {}
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined
For the repro steps above, I see also in the content area below the menu that, after clicking on the "Tallaperla" genus, the order is correctly updated to "Plecoptera", but the family and genus aren't. I imagine that's a clue to the problem, but have no clue what it means. I should maybe add that it's not just those two genera causing the problem--it's easy to repro the errors if you click around enough in the menu area. That repro example was just the easiest and fastest I could find.
I'm using Ember 1.0.0-rc.6, Ember Data 0.13, and Handlebars 1.0.0-rc.4.
I've looked at your code and it looks good. I believe this is the same bug I am facing wrt nested routes with ember. There is a discussion going on about it here. Maybe you should chime in. :)
I posted a temporary fix there that worked for me, but my routes were only 2 level deep, so it was working ok. Your nesting is 3 levels deep, that fix may not work for you.
A different approach to your problem, would be to use a single resource with multiple dynamic segments.
this.resource('species', { path: '/:order_id/:family_id/:genus_id'});
You'll lose flexibility in the controllers, having to put everything in one controller, and the route would need to do more work in find based on which params are present. but it might work!