Custom URL in Meteor - javascript

I have url in my project like this: https://localhost:3000/groups/KhHB9TwzZxiddgJND/event
I want to get somethink like that: https://localhost:3000/groups/groupName/event
How can I do it? I use Meteor 1.3 on Blaze, flow-router for routing

You would just define your route and use a name variable instead of an id:
FlowRouter.route('/groups/:name/event', {});
Then later when you wanted to set the data context for your template you would do something like:
let groupName = FlowRouter.getParam("name");
const group = Groups.findOne({ name: groupName });
An _id isn't special in a route, a route parameter is just something that you're eventually going to search by. The nice thing about an _id is that it's guaranteed unique. If you're searching by name then you may have to enforce uniqueness in your model unless you really want a list.

Related

Vue 3 - Best way of using URL parameters for bookmark (like filtering)

I want to extend my application with a URL parameter functionality:
If a filter is activated, the URL needs to be updated
If someone goes directly to the URL you should get the same data as you filtered manually
I see different ways in this world:
The parameter story based on: domain.com/?status=pending&relation=1
Clearer/neat way: domain.com/filter/status:pending/relation:1
I'm more looking for the last example. How can I do this within Vue? I am currently working as an example within Router with props: route => ({ query: route.query }).
Can someone help me and maybe others on my way to realize this?
It dependes....maybe is better to create an api that refresh your table...
In this way you pass the parameter to the api that will get you the book array, and in this way you refresh your content...
In this way you will have a url like:
domain.net/page?f=1p=filterparamete
Or you can use vue dynamic routing
/page/:filter/:filter_value
But in this case you shold have a fixed url structure in case of multiple filter setting..
In any case the first way is the most easy and scalable way...
You can use the query-string lib to parse URL parameters and then just filter items by params
const queryString = require('query-string');
console.log(location.search); // '?status=pending'
const parsedParams = queryString.parse(location.search);
console.log(parsedParams) // { status: 'pending' };

vue-router : use parameter in meta data?

I'm wondering if I can use the parameter from path in vue-router's meta data field. For instance, here I am using the parameter entity_id in the path.. but, I want to also use that parameter as a property/parameter in the meta property so that I can use it more easily:
{
path : ':entity_id',
name : 'DashboardEntity',
component: DashboardEntity,
meta : {
label: 'Example',
iwantthistobetheid: ':entity_id'
},
},
The reason is that I have a breadcrumb file that lists out the routes/children/etc. and I want to display the ID in the breadcrumb.
I can do that in the above example by using this.$route.params.entity_id in my breadcrumb view.. but then I have to name every parameter in my routes something generic like id to have it display every time.
Any idea of how this might be possible or a solution that doesn't require me to either rename all my router parameters or have a huge if/else to check each routers params to display in my breadcrumb view?
You should be able to do this:
this.$route.params[this.$route.meta.iwantthistobetheid]
that would be the equivalent of
this.$route.params.entity_id
or if iwantthistobetheid = 'object_id'
this.$route.params.object_id

Vue Router dynamic segment with params

I am trying to create a route that can handle both dynamic segments and accept router-props (params). Something like this:
{ path: '/peer:body?', name: 'peer', component: () => import('pages/peer.vue'), props: true }
And eventually push a route like this:
this.$router.push({ path: '/peer/' + row.body, name: 'peer', params: { row: row } })
Unluckily, I am only able to use dynamic segments using pathas route property or params using nameas route property, but never simultaneously.
First, as you already mentioned, when constructing "location descriptor object" for $router.push (or to prop of <router-link>), you can use path or name, not both at the same time (doesn't make sense to do so)
Second, you can pass params only when you use name (as described here - paragraph between first two code samples). To overcome this you can use query instead of params or build whole path including the params into the URL string.
And that brings me to the most important part of my answer. It seems as you are trying to pass a complex object as a route param (and into the target component props). While this is technically possible, it's not a good way of doing things. You have no place in your path definition where to put content of such parameter - it will work with push or clicking <router-link> where parameter is provided as an object, but when user accesses that URL directly (by copying and pasting URL for example), the page will be broken because prop parameter will be missing (as it cannot be extracted directly from the URL).
So my advise is to avoid that. Put your data into something like Vuex and instead of passing whole object by router, pass only some kind of identifier that can be included in the URL, extracted by Router and passed as a prop into target component. Then your target component should grab the Id and use it to query Vuex to get the data it needs...

How to get url parameters in Backbone?

I'm using Backbone with Marionette.
I have a link <a> tag where I'm passing few parameters, how can I extract those values in other pages using Backbone?
View Details
Address Bar url:
http://localhost.com:8080/help/?name=matth&age=25&email=matt#gmail.com 44
Using Php, this is straightforward:
$Url = $_GET['state']."#".$_GET['city'];
How can I achieve it within my Backbone app?
If the route is defined with something like this:
'help/:name&:age&:email' : 'help'
Then you can access those params in the help function just by defining them in the signature of the method (within the backbone router),
help: function(name, age, email) {
// do whatever you want with the params
}
In your case, this will give you params like this:
name="XXX" age="XXX"
So the proper routing would be
'help/?(name=:name)(&age=:age)(&email=:email)' : 'help'
Where parentheses make a part optional.
Backbone docs
Routes can contain parameter parts, :param
Note that the order is important and the following url wouldn't trigger the route callback. Notice the email and age params placement.
help/?name=test&email=test%40example.com&age=6
In order to trigger a route regardless of the number of params and their ordering, take a look at how to parse the query string in the route function, but that won't always work.

Fetching a single Backbone model from server

Say I have a route setup:
'photos/:id' : 'showPhoto'
and somebody shares the url: www.mysite.com/photos/12345 with a friend.
When their friend clicks on the shared link, showPhoto gets called back with 12345 passed as the id. I cant figure out how to fetch the model from the server, because even when setting its id property and calling fetch(), backbone thinks that the model isNew and so the ajax request url is just /photos instead of /photos/12345:
showPhoto: (id) ->
photo = new models.Photo _id:id
photo.fetch #does a GET to /photos, I would have expected it to request /photos/12345
success: () ->
render photo view etc...
Photo = Backbone.Model.extend
idAttribute: '_id'
urlRoot: '/photos'
The model Photo is usually part of a collection, but in this scenario someone is visiting the site directly and only expects to see data for one photo, so the collection is not instantiated in this state of the app.
Is the solution to load the entire collection of photos and then use collection.getById(id)? This just seems way too inefficient when I just want to load the properties for one model.
if you don't have the model as part of a collection, you have to tell the model the full url manually. it won't auto-append the id to the urlRoot that you've specified. you can specify a function as the urlRoot to do this:
Photo = Backbone.Model.extend({
urlRoot: function(){
if (this.isNew()){
return "/photos";
} else {
return "/photos/" + this.id;
}
}
});
Backbone uses the id of the model to determine if it's new or not, so once you set that, this code should work correctly. if it doesn't, you could always check for an id in the if-statement instead of checking isNew.
You do not need to tell backbone whether or not to append the id the url. Per the documentation: http://backbonejs.org/#Model-fetch, you may simply set the urlRoot to the equivalent of the url in a collection.
Backbone will automatically append the desired id to the url, provided you use one of the following methods:
model.set("id", 5); //After initialized
model = new Backbone.Model({id: 5}); //New model
If you manually set the id in the attributes hash or directly on the model, backbone won't be aware of it.
model.id = 5; //Don't do this!
there's already a similar question: "How do I fetch a single model in Backbone?"
my answer there should work for you (and it's in coffeescript)
also remember to check Backbone Model#url documentation, it's all explained there
I would bootstrap the collection (by rendering the following to the page) with just one model in it like this:
photos = new PhotoCollection();
photos.reset([ #Html.ToJson(Model) ]);
Note that the server side code that I use is ASP.Net MVC so use something specific to your server side architecture. Also note that the square brackets are important as they take your singular model and wrap it in an array.
Hope that's helpful.

Categories