Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ergo/crossroadsjs-router
DISCONTINUED - Polymer element for crossroads.js router
https://github.com/ergo/crossroadsjs-router
Last synced: 18 days ago
JSON representation
DISCONTINUED - Polymer element for crossroads.js router
- Host: GitHub
- URL: https://github.com/ergo/crossroadsjs-router
- Owner: ergo
- License: other
- Created: 2016-12-11T23:15:40.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-29T12:09:54.000Z (about 7 years ago)
- Last Synced: 2024-11-05T11:49:51.295Z (2 months ago)
- Language: HTML
- Homepage:
- Size: 47.9 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
### DISCONTINUED
Because crossroads.js does not have a maintainer and there appear to be implementation problems inside the library, nor there are no PR's being merged into the project I discontinued the development of this component (anyone if free to pick up the work though, crossroads is looking for a maintainer).
I've created another router based on Angular's `ui-router-core` that is very well maintained and has an active community. You can find the code here https://github.com/ergo/polymer-ui-router, https://www.webcomponents.org/element/ergo/polymer-ui-router. The new project provides tons of new better functionality and I advise everyone to migrate when you can. It also is tested to work on both Polymer 1 and 2.
[](https://beta.webcomponents.org/element/ergo/crossroadsjs-router)
`crossroadsjs-router`
wraps [Crossroads.js](http://millermedeiros.github.io/crossroads.js) router inside a polymer element.
It has all the features of the `app-route` element plus:
- Named routes
- URL generation from path definitions (for client side AND
server side definitions)
- Allows for global router setup
- Supports for router nesting
- Route data can contain information for every path segment matched
- Provides elements for segment data extraction and link generation around other
elements
- Optional matched route parameters typecasting
- Additional match rule support for every rule definition
- Additional per-route custom callback support when an url is matched or not found
Using `crossroadsjs-route-data` with nested routes and an element like `iron-lazy-pages`
can achieve functionality comparable to solutions like `angular-ui-router`
(see the nested routes demo).
You can use the router with both nested routes approach and "flat" routes -
when using nesting, every level of routes will have its own router created
and `pipe()`'d to parent router.
If you want to use route nesting the name of route has to contain `_`
character as delimiter:
- first route name: master
- second route name: master_other
means that route `master_other` is piped into `master` router. This element will create all the necessary
routers and chain them together. Remember that you need to pass the `subroute*` to route definitions
for this to work correctly.
Example flat usage:
Example nested usage:
### Supporting elements.
####
`` element provides you with easy way to extract
route information from router matched data object into your templates via binding.
Example usage:
Section param value from router: [[extractedDataObject.somevalue]]
####
`` element provides you with easy way to generate urls from
named routes passed from `crossroadjs-router` elements.
It automatically converts `param-*` attributes you passed to the element as
to object used in `crossroads.interpolate()`.
Example usage:
Edit
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
## Viewing Your Application
```
$ polymer serve
```
## Building Your Application
```
$ polymer build
```
This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving `polymer serve` a folder to serve
from:
```
$ polymer serve build/bundled
```
## Running Tests
```
$ polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.