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
Related
This is my first time posting on stackoverflow!
I'm currently in the process of building a sort of social media webapp. I just started on the notifications page of the webapp. My issue is that different notifications have different templates. So while some notifications may include an image, other notifications do not. I've had success displaying a feed by looping through a JSON array with the id as the key, but I don't think I can do that with the notifications pane. Each notification has its separate ID, so looping through them isn't the issue. My main issue is that each notification has its own type attribute, and I want to display different div templates depending on the type, while looping through the JSON using the ID.
For clarification, I'm using the quasar cli for vue.js.
I'll attach my code for the loop below for some context.
Any help would be appreciated. I tried searching for this issue and found nothing, though that maybe an issue of me not knowing how to search properly.
<q-card
class = "no-padding"
style = "height: 150px;"
v-for = "event in joinedEvents"
:key = "event.id" flat>
Basically, I want to be able to have the display an image if the notification type is 1 or display button if it is 2.
Thanks in advance!
You can make use of dynamic component feature of vue js, define your notification templates and then based on identifier set them dynamically, by using this method you can use single model for as many templates you want
Template structure will be like this
Components
Notifications
Template A
Tempalte B
Template C
---- etc.
In vue just model component make use of
<component :is="myDynamicComponent" :data="myDyanmicDataForComponent" />
Whenever you receive notification just set the template and data then make it visible.
Here is a working example:
https://codesandbox.io/s/vue-dynamic-template-example-gwt9d
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 have designed a app using mithriljs(0.2.5) with components and Observer pattern for inter-component communication. However I do have a requirement of blocking an action of component based on another one.
Say, I have 2 components ItemList & ItemDetail. When an Item is selected in the list component an ITEM_SELECTED event is fired that causes the detail to be loaded. Detail component allows user details to be edited and saved.
If the details are dirty(edited not saved) and user tries to do an selection, I want to show a Save Item screen with Yes/No/Cancel option. Based on the option selected either load new details or cancel and go back to previous selection.
Selection component has no knowledge of dirtiness of the details, Detail component will render the Save Confirmation.
One option for the Detail component to fire a REVERT_SELECTION message if cancel is selected, ideal pattern would be to block the Item selection completion till Detail components gives a go/no go response, seems I need something other than observer, which is blocking.
Thanks
I suppose the best solution would be to use a Modal Dialog that will block all the GUI unti a selection on Yes/No/Cancel is done.
Im mithril 0.2.5 you varios approact available for modals.
Please take a look to this samples
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