ld-navigation
Routing-like element for the modern Web
ld-navigation
A set of Web Components for data-driven Linked Data REST client in the browser.
With ld-navigation you let actual Linked Data be the router of your application.
You then simply GET and decide what to display based on the data returned. No more client-side routing.
<ld-navigator>
Control current resource in relation to document path Maintain browser history with HTML history API Set up base resource URL and base client path to tweak routing
<ld-link>
Initiate transition between application states
Demos
Demos and sort-of documentation.
ld-navigation
also plays nice with location.hash history.
Installation
Run yarn add ld-navigation
In your code
// main element, required
import 'ld-navigation/ld-navigator'
// optionally, to wrap links
import 'ld-navigation/ld-link'
// optionally, to initiate navigation manually
import fireNavigation from 'ld-navigation/fireNavigation'
No external dependencies
Usage
Let's assume that:
- Your website is at
http://www.my.app/
. - Your Linked Data API is at
http://api.my.app/
.
<!-- navigator exposes a resourceUrl property, see below -->
<ld-navigator></ld-navigator>
<!-- ld-link replaces or wraps anchor -->
<ld-link resource-url="http://api.my.app/people">get people</ld-link>
<ld-link resource-url="http://api.my.app/projects">
<a>get projects</a>
</ld-link>
<script>
var navigator = document.querySelector('ld-navigator')
navigator.addEventListener('resource-url-changed', function(e) {
// same url sits in e.detail.resourceUrl
var nextUrl = navigator.resourceUrl;
// no go ahead and $.get or window.fetch your data from nextUrl
window.fetch(nextUrl).then(bindDataWithPage);
});
</script>
With the above code, when you click the first link, the browser moves to http://www.my.app/http://api.my.app/people
and the
resource-url-changed
event is fired.
Base URL
Obviously an URL like http://www.my.app/http://api.my.app/people
is ugly (and, well, invalid). It is possible to get rid of the API domain
by adding an attribute to the <ld-navigator>
tag:
<ld-navigator base="http://api.my.app"></ld-navigator>
This way the API domain is stripped out from the browser address bar and http://www.my.app/people
remains. This is where client-side
routing becomes virtually obsolete.
Polymer
ld-navigation
will also play nice with Polymer - see the demos above.
Tests
Tests are written with @open-wc/testing.
yarn install
yarn test:local
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2017-01-07
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent
ld-navigation - Vaadin Add-on Directory
Routing-like element for the modern WebView on GitHub
ld-navigation version 0.1.0
### Dependencies
ld-navigation version 0.2.0
### Dependencies
ld-navigation version 0.2.1
### Dependencies
ld-navigation version 0.2.2
### Dependencies
ld-navigation version 0.2.3
### Dependencies
ld-navigation version 0.3.0-a1
### Dependencies
ld-navigation version 0.3.0-a2
### Dependencies
ld-navigation version 0.3.0-a3
### Dependencies
ld-navigation version 0.4-a1
### Dependencies
ld-navigation version 0.4.0-a2
### Dependencies
ld-navigation version 0.4.0-a3
### Dependencies
ld-navigation version 0.5.0-a1
### Dependencies
* lit-html#0.14
ld-navigation version 0.5.0
### Dependencies
ld-navigation version 0.5.1
### Dependencies
ld-navigation version 0.5.2
### Dependencies