anywhichway/tlx

router() documentation and get url part without args

pwFoo opened this issue · 10 comments

pwFoo commented

Hi @anywhichway

I think you have to update the readme about router event object?
https://github.com/anywhichway/tlx#function-tlxrouterobject-routes

I think instead of const view = this.target.view; it should be const view = event.target.view;?
With this I get an error. event seems to work.

Is there a simple way to get the URL part without params?
I get the full address with

event.target.href

@pwFoo You are correct, the docs were wrong and should have read as below. The arrow function was not providing the correct this context. Fixed in v1.0.30 and also updated router example.

// when test/1 is clicked, logs {id:1}
handlers({click:router({"test/:id":function(args) {
	const view = this.target.view; 
	this.stopRoute(); 
	view.parentNode.replaceChild(MyComponent(args),view);
	}})});
pwFoo commented

@anywhichway
And how get the url part without the args? I get the href part of target, but would be nice to get the url part too. Maybe as first args value and then the params?

@pwFoo No sure what you mean. Could you provide a more concrete example?

pwFoo commented
/path/file/:id/:param
args[0] = /path/file  // <- url part in front of the args should be first arg in array?
args[1] = id
args[2] = param

@pwFoo What about a path like this, which is odd but possible?

/path/file/:id/:param/more/path?age=20&gender=male

args[0] = "/path/file"
args[1] = someid
args[2] = someparam
args[3] = "more/path"
args[4]={age:20,gender:"male"}

I could also add a ".named" property to the array which would be:

{ id: someid, param: someparam, age: 20, gender: "male" }

pwFoo commented

That is a more complex example. Maybe not needed, but if args have all the parts it would be nice.
Code complexity should be as small as possible. If it's the same, your example would be fine too.

@pwFoo I just realized this would be a breaking change to the API since an object is currently passed. Would you be OK with inverting the solution, e.g.

args = { id: someid, param: someparam, age: 20, gender: "male" }
args.raw; // which would hold an array like this ["path/file",":id",":param","more/path",querystring]
args.resolved // which would hold ["path/file",someid,someparam,"more/path",{age:20,gender:"male"}]

pwFoo commented

Easy way to get additional values is fine.
Object should be fine to if the problem is type array!
I would like to have the data in args. Type isn't important If I can loop through and can use keys.

@pwFoo Just pushed a new version with support for the above. Also check out the README, added documentation for advanced routing using functions and regular expressions along with an enhanced router.html example and new advanced_router.html example.

pwFoo commented

Thanks!