Using UI-Router v1.0rc1, is it possible to transition to the current state, changing only one param, without reloading the state. Let me give you my use case:
On the left of the page I show the listings titles of a user. When clicking on a title the main content is changed to... the listing data obviously. When clicking on another title, the current 'listing' state is reloaded and fed with other data. In my listing template, I have a map. Each time a new listing must be displayed, the dom is destroyed and reloaded (with the same template) which kills the map and rebuilds it. I would prefer to only change the params (the listing id) of the listing state, detect it and change the content of the template (and reposition the map). The actual listing data is currently loaded in the resolves thanks to the id param.
Is it something feasible?
Try this:
$state.go('some.state', { param: 'x' }, {reload: false});
more about reload can be found here
Related
I have the following code:
https://jsfiddle.net/audiodude/pq9aczdu/33/
If you go to the Item View, then jump to page 10, say, it displays "page 10 of ??" (you're on page 10) and the input box agrees.
If you jump to page 20, same thing, so far so good.
However, if you then use the back button in your browser, it says "page 10 of ??" but the input box still says page 20.
I know that the Vue Router likes to reuse components when the path doesn't change, and my understanding is that the "this.page" data value on the ItemPagination component isn't getting updated. But I thought I was following good practice by separating the initialPage prop from the data that is bound to the model.
How do I get the input box to update on the browser BACK action? I can't use onBeforeRouteUpdate on ItemPagination because it's not the top level component being rendered so never receives that event.
Thanks!
Add the following to your ItemPagination component to keep an eye on changes to the route and query parameters
watch: {
$route (to) {
this.page = to.query.page || 1
}
}
See https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
I have home page that lists items, but also when I add an item I want to popToRoot(), to home page. Now, If I come to root from addItemPage, I want to show the button to save a list, to make a HTTP call..
Is it possible, I was thinking about passing the for example (fromAdd: true) to navCtrl and then based on that show the button(ngIf) ?
You can use any of the rootscope variables, navparams and service to set the value on the parent page and then access it in your ng-init function declared on you child page and show your button on the basis of that value by using ngIf expression.
In my Ember app, I initially start at the root level (/) and I have multiple links (say Link1, Link2, Link3)
Now each of these links displays a common grid i.e. I use same route/controller/template JS, but re-render the grid, by setting some attributes dynamically on the controller
Thus in my application.js, I do
this.controllerFor('my-grid').set('attr1', params[0].value);
this.controllerFor('my-grid').set('attr2', params[1].value);
this.transitionTo('my-grid');
Is this the correct way to transition ?
I mean, specifically I need
this.transitionTo('my-grid');
to be called only once (say on click of link1 from root), since after then, clicks on link2, link3 would just need a change of attribute values on my same controller and should just re-render the grid (after server api call)
Please suggest if there is some condition that I can check for calling
this.transitionTo('my-grid');
In your application you can check ApplicationController.currentPath:
this.controllerFor('my-grid').setProperties({
attr1: params[0].value,
attr2: params[1].value
});
if (this.controllerFor('application').get('currentPath') !== 'my-grid') {
this.transitionTo('my-grid');
}
I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD
Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.
One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.
In my user controller,i use a outlet to render userLog section,and use controllerFor('userLog').set('model',App.UserLog.find(model.id)) to set the model of userLog,but i want to add a button to userLog section ,when user click it,it will load more logs,but i tried to push new object to its model,nothing happened.
here is the project address:https://bitbucket.org/magicshui/web/src/4ff895b5c22823c6ec1c1536ca2e7b59237f0459/assets/coffee/app/routes/?at=master
when you goto web/index.html#/users and then click one user name,it will show the section,because i haven't set all url correctly,so you should fill into the address bar this address directly.
the problem file is user.coffee and userLog.coffee
thanks for your help
you should be using pushObject instead of push that's how Ember catches that you've changed the array and updates the template