enhance dynaticjs.md
This commit is contained in:
parent
e467e40d58
commit
50aa4e5524
@ -12,6 +12,71 @@ meta:
|
||||
|
||||
a simple reactive runtime JS framework inspired by Vue
|
||||
|
||||
## about
|
||||
- stack: js
|
||||
- repo: [github.com](https://github.com/adb-sh/dynaticjs)
|
||||
- boilerplate repo: [github.com](https://github.com/adb-sh/dynaticjs-boilerplate)
|
||||
- npm: [npmjs.com](https://www.npmjs.com/package/dynaticjs)
|
||||
|
||||
## current features
|
||||
- dynamic router
|
||||
- components (recursive)
|
||||
- data binding (from component to component)
|
||||
- trigger rerender components on data change
|
||||
- scoped references to DOM elements
|
||||
|
||||
## simple component example
|
||||
```javascript
|
||||
import Component from "dynaticjs/Component";
|
||||
import { propFactory } from "dynaticjs/helpers.js";
|
||||
import RouterLink from "dynaticjs/components/RouterLink.js";
|
||||
import RouterView from "dynaticjs/components/RouterView.js";
|
||||
import Home from "./pages/Home.js";
|
||||
|
||||
export default class App extends Component {
|
||||
init() {
|
||||
return {
|
||||
components: {
|
||||
RouterLink,
|
||||
RouterView,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
data() {
|
||||
return {
|
||||
routes: propFactory([
|
||||
{
|
||||
name: 'home',
|
||||
title: 'Home',
|
||||
path: '/',
|
||||
Component: Home,
|
||||
},
|
||||
]),
|
||||
};
|
||||
}
|
||||
|
||||
render(state) {
|
||||
return `
|
||||
<div id="app">
|
||||
<nav ref="nav">
|
||||
<router-link class="btn btn-primary" to="home">Home</router-link>
|
||||
<router-link class="btn btn-primary" to="about">About</router-link>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>DynaticJS Boilerplate</h1>
|
||||
<router-view bind:routes="routes"></router-view>
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setup() {
|
||||
console.log("Hello World :D");
|
||||
console.log("#app element", this.$el); //corresponding DOM element
|
||||
console.log("nav element", this.$refs.nav); //scoped reference to DOM element with the attribute `ref="nav"`
|
||||
console.log("child components in App", this.$components) //references to child components
|
||||
}
|
||||
};
|
||||
```
|
||||
[full example](https://github.com/adb-sh/dynaticjs-boilerplate/blob/master/src/App.js)
|
||||
|
Loading…
Reference in New Issue
Block a user