Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ciffi/ciffi-js-router
JS Router for Ciffi-js based projects. It supports pushState with twig template for spa project
https://github.com/ciffi/ciffi-js-router
ciffi-js framework frontend pushstate router single-page-app twigjs
Last synced: 2 days ago
JSON representation
JS Router for Ciffi-js based projects. It supports pushState with twig template for spa project
- Host: GitHub
- URL: https://github.com/ciffi/ciffi-js-router
- Owner: ciffi
- License: mit
- Created: 2017-05-06T10:32:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-08T22:00:43.000Z (over 7 years ago)
- Last Synced: 2024-04-27T04:03:31.711Z (7 months ago)
- Topics: ciffi-js, framework, frontend, pushstate, router, single-page-app, twigjs
- Language: CSS
- Homepage: https://www.ciffi.it/ciffi-js/docs/router
- Size: 690 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[npm-month]: https://img.shields.io/npm/dm/ciffi-js-router.svg
[npm-total]: https://img.shields.io/npm/dt/ciffi-js-router.svg
[npm-version]: https://img.shields.io/npm/v/ciffi-js-router.svg
[npm-url]: https://www.npmjs.com/package/ciffi-js-router
[![npm-version][npm-version]][npm-url]
[![npm-month][npm-month]][npm-url]
[![npm-total][npm-total]][npm-url]
[](https://gitter.im/ciffi-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# ciffi-js-router
JS Router for [Ciffi-js](https://www.npmjs.com/package/ciffi) based projects
* import in main.js
* enable/disable pushState with twig template
```javascript
require('ciffi-js-router').pushState(false);
```
* define env config in src/scripts/config/config.js
```javascript
var Config = {
projectName: 'my-site',
env: {
dev: {
baseUrl: 'http://localhost',
apiUrl: 'http://my-site.local/',
shareUrl: 'http://localhost',
assetsUrl: '/dev/'
},
local: {
baseUrl: 'http://my-site.local',
apiUrl: 'http://my-site.local/',
shareUrl: 'http://my-site.local/',
assetsUrl: 'http://my-site.local/src/'
},
stage: {
baseUrl: 'http://my-site.stage.it',
apiUrl: 'http://my-site.stage.it/',
shareUrl: 'http://my-site.stage.it/',
assetsUrl: 'http://my-site.stage.it/src/'
},
prod: {
baseUrl: 'http://www.my-site.it',
apiUrl: 'http://www.my-site.it',
shareUrl: 'http://www.my-site.it',
assetsUrl: 'http://www.my-site.it/src/'
}
}
};
module.exports = Config;
```
* define pages modules in src/scripts/config/pages.js
```javascript
var Pages = {
'.js-router--home': 'index',
'.js-router--example': 'example',
'.js-router--test-one': 'test/one'
};
module.exports = Pages;
```
* create pages modules in src/scripts/pages/
* config is current env config defined in src/scripts/config/config.js
* define this.content if pushState is active and you want load a relative twig view
* this.onLoad will be called on each document.onLoad or urlChange and twig template render events
```javascript
var Page = (function () {
function Page(config) {
this.config = config;
this.content = {
prova: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
this.onLoad = onLoad;
return this;
}
function onLoad() {
console.log('index page loaded');
}
return Page;
});
module.exports = Page;
```
__full documentation available at [ciffi.it/ciffi-js](https://www.ciffi.it/ciffi-js/docs/router)__