gnaeus / knockout-router

Router for Knockout JS components with syntax inspired by ReactRouter
MIT License
3 stars 0 forks source link

Is this still usable #1

Open joshua1 opened 6 years ago

joshua1 commented 6 years ago

Hi @gnaeus i got here from your knockout-decorators library which i find super impressive seeing that i am moving from projects where i used vue, react to one running on knockout with the opportunity to have it upgraded. i wonder though , if this library (knockout-router) still works ok and can be used, seeing that it has been a very long while since it was last worked on. i am looking to create at starter kit with parcel.js and knockout-decorators

joshua1 commented 6 years ago

Also how does one use this with es6 imports of components or knockout Component bindings without using templates (and the associated template mapper)

gnaeus commented 6 years ago

Hi @joshua1! Knockout is not updated since March 2017. So there is nothing to change in knockout-router.

I don't actively maitain this project because I change my job. Projects that use knockout-router are developed by my previous team. And I don't know is there anyone who use it except them. But I can add more docs and upgrage build tools.

The router can perfectly work with es6 and @component decorator from knockout-decorators. See example:

app-layout.js

import { component } from "knockout-decorators";
import "knockout-router";
import "./home-page"; // knockout component
import "./user-page"; // knockout component

@component("app-layout", require("./app-layout.html"))
class AppLayout {
  // ...
}

app-layout.html

<h1>App</h1>
<knockout-router>
  <home-page route="/home"></home-page>
  <user-page route="/users/:userId"></users-page>
</knockout-router>

user-page.js

import { component } from "knockout-decorators";
import "knockout-router";
import "./profile-block"; // knockout component
import "./settings-block"; // knockout component

@component("user-page", require("./user-page.html"))
class UserPage {
  constructor(context) {
    this.userId = context.params.userId; // ko.observable
    this.url = context.url;
  }
}

user-page.html

<h1>User <span data-bind="text: userId"></span></h1>
<knockout-router routePrefix="/users/:userId">
  <profile-block route="/profile"></profile-block>
  <settings-block route="/settings"></settings-block>
</knockout-router>

The main purpose of this project is nested routers like in example above. For route /users/123/profile at first we render user-page component. And then user-page resolve the rest routing part /profile to it's subcomponents. If you don't need nested routing, you can use more mature knockout-contrib/router.

joshua1 commented 6 years ago

Thanks a lot @gnaeus this is helpful