Comments (17)
What I am trying to do:
- I have a list view A and a list view B
- I have a detail view whose data depends on whether you came from A or B, and shows content based on an id in the list view
I am trying to find the most elegant way to implement this.
from routify.
Here's some code I was trying:
import { url } from '@sveltech/routify';
then
<a href={$url('/:language/:detail', { detail: character.romaji, language: 'hiragana'})}>
{character.character}
</a>
from routify.
What you're showing in the screenshot should be fully supported.
Any chance you can give a specific example of your scenario in the second post?
from routify.
I created a branch for my specific situation.
https://github.com/Wolfr/kana-master-svelte/tree/replay
Here you can see {language} is undefined, I would expect it to be "hiragana". I did export let language
from the detail.
from routify.
Test says there's no problem with param in folder, in basic cases.
from routify.
I think this probably comes down to the "drafty" documentation.
The way it's intended is that if a page has a [parameter], the parameter is passed to the page as a prop. In the case of a folder, the parameter is passed to the _layout.svelte (which for all intends and purposes could be considered _folder.svelte).
To access all parameters, you can use the $params helper.
from routify.
@Wolfr You repo is giving an error about a missing component, but once that commented out, I can confirm the problem.
For the record, I hadn't pulled the last master. The test is indeed falling with last Routify version, and was passing with the previous version. So what you're trying to do was possible but isn't anymore.
Accessing parent params from page components' props might not be supported in the future. For now, the recommended approach is to use the $params
helper, like @jakobrosenberg said.
from routify.
I found a way to solve my problem but it is kind of wieldy.
$: Object.keys($params).forEach(function eachKey(key) { if (key == "language") { language = $params[key]; }});
This to make sure that the language
param works.
from routify.
My evening-of-coding result https://kana-master-svelte.now.sh :)
Source code: https://github.com/Wolfr/kana-master-svelte
Any ideas for optimizations regarding routing welcome.
from routify.
What about?
$: ({ language } = $params)
I don't think it is a good idea to only set the variable if the key is effectively present in $params
. You'd better stay in sync with what's in there. If the value is required and not present, you have a problem that you need to fix anyway, elsewhere.
Continuing to use a stale value doesn't seem like the proper solution to me. If your code really can't live without a value for language
, I think throwing an exception would be better.
from routify.
Thank you, that is smart and looks cleaner. Not sure if I fully understand it though 😝
Now, currently, if I use the back button in my app now, regardless of using your solution or mine, it throws an error.
I have the feeling that I don't know enough about how reactive stores should interact with the parameters, I am a bit out of my depth here. At this point it could be a bug in my logic or a bug in the framework.
I am linking to two levels back, is this supported behavior or not?
<Button variant="ghost" icon="chevron-left" href="{$url('../../')}">Back</Button>
Sorry if this feels too much like QA for my app, but since Routify is relatively new I thought I would ask.
from routify.
That is supported. I was writing my router suggestions here, but eventually figured it would be easier to just show my idea. I'll push a makeover very soon.
from routify.
There was a bug in Routify, which updated the internal store before the page/layout had been destroyed, meaning that your component could be left hanging without the needed data. Pushing a fix now.
from routify.
I got very confused by the navigation on your site. The top level navigation seemed to be at the bottom below-the-fold; Katakana seems to be a subset of Hiragana, judging by the browser address and the navigational highlighting of links didn't work for Hiragana Disgraph, since Hiragana Monograph was on /index and Hiragana Disgraph was on hiragana-digraphs.
I can be a bit of a robot at times and others may find the UX intuitive.
I've rewritten a bit of your code to show off an alternative here.
https://public-fkf8u37xb.now.sh/
https://github.com/jakobrosenberg/kana
from routify.
Just to clarify...
This:
$: ({ language } = $params)
is equivalent to this:
$: language = $params.language
ES destructuring + Svelte reactive declaration... Said otherwise, lots of sugar!
from routify.
Hi Jakob, for your informatiom. This is a rewrite (WIP obviously :)) of an iOS app. This is supposed to be a mobile app with a tab bar in the end, you can see what is supposed to look like at http://kanamaster.com/ .
The relationship between the two that Katakana and Hiragana are two scrips, and both have digraphs.
I'll check your code to see what I can learn!
from routify.
That explains it. :P
The gist of what I did with your code was that I moved all the individual pages into /:graph/:language and unified them in one page and treated each graph/language as a prop to be fed to the maingrid.
You can shift this around to your liking.
from routify.
Related Issues (20)
- Compatibility with Vite 5 HOT 2
- v3: Inlined meta doesn't work for index files HOT 4
- v3: derived helpers became broken after svelte migration from 3.x to 4.x HOT 3
- TypeError: Function.prototype.apply was called on undefined, which is a undefined and not a function HOT 4
- Add Routify config option to preserve/strip/force the trailing slash on urls
- v3: Setting meta `title` value cause console warning HOT 2
- vite-plugin-svelte: missing exports condition warning (Routify 2.18.12) HOT 7
- Using metadata indirectly (via variable) makes goto to not work properly. HOT 5
- [Bug][Doc][v3] Invalid Url Rewrites example HOT 4
- [Bug][V3] Routify renders 404 a fraction of second when using URLRewrite HOT 10
- Vite build: missing specifier (^2.18.13) HOT 3
- Suggestion: Allow ts extension in meta files HOT 3
- After upgrading to 2.18.13 './plugins/rollup' is not defined by "exports" HOT 4
- Anchors / scroll into view HOT 3
- Update peerDependencies to prevent `npm install` conflicts HOT 5
- Make killWarnings.js more resilient HOT 1
- Routify hangs with vitest HOT 10
- Support svelte 5
- Routing priority HOT 1
- I Just thinking aloud, URL rewrite options should be part of AddressReflector HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from routify.