forum

home / developersection / forums / how does knockout.js handle routing in single-page applications (spa)?

Ask Question
Revati S Misra

Revati S Misra

Follow

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

26-Jun-2024

Knockout.js Routing

Knockout.js itself does not have built-in routing capabilities like some other SPA frameworks (e.g., Angular, React with React Router). However, you can add routing to Knockout.js applications by using libraries or using custom solutions. Here’s how you can get closer.

Third-party libraries 

Use libraries like Sammy.js or Durandal.js (which builds on top of Knockout.js and provides routing among other things). 

These libraries help in routing in your Knockout.js application.

  • Sammy.js- Sammy.js is a lightweight JavaScript framework that provides routing capabilities. It can be integrated with Knockout.js to handle navigation and routing within the SPA.
  • Durandal.js- Durandal is a comprehensive framework designed for SPAs. Includes routing, composition, and other out-of-the-box features. It works well with Knockout.js and provides a structured way to manage navigation and navigation.

Manual Routing 

Use manual routing using Knockout.js observables and bindings. This involves creating single-page applications where different views (templates) are shown depending on the current route.

  • Observable for Current Route- Monitor observables on your visual model to monitor current route or view state.
  • Bindings for navigation- Use Knockout.js bindings (if, visible, templates) to conditionally render your SPA components based on the current path or state.

Example- 

simple example of manual routing with knockout.js

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Knockout.js Routing Example</title>
</head>
<body>
    <div class="container my-4">
        <nav>
            <ul>
                <li><a href="#" data-bind="click: goToPage.bind($data, 'home')">Home</a></li>
                <li><a href="#" data-bind="click: goToPage.bind($data, 'about')">About</a></li>
                <li><a href="#" data-bind="click: goToPage.bind($data, 'contact')">Contact</a></li>
            </ul>
        </nav>
        <div data-bind="visible: currentRoute() === 'home'">
            <h1>Home Page</h1>
            <p>Welcome to the home page!</p>
        </div>
        <div data-bind="visible: currentRoute() === 'about'">
            <h1>About Page</h1>
            <p>Learn more about us!</p>
        </div>
        <div data-bind="visible: currentRoute() === 'contact'">
            <h1>Contact Page</h1>
            <p>Contact us here.</p>
        </div>
    </div>

    <script>
        function AppViewModel() {
            var self = this;
            self.currentRoute = ko.observable('home');

            self.goToPage = function(route) {
                self.currentRoute(route);
            };
        }

        ko.applyBindings(new AppViewModel());
    </script>
</body>
</html>

In the example above-

  • AppViewModel manages the current route using currentRoute observable.
  • Navigation links (<a> tags) are bound to goToPage function to update the currentRoute.
  • Different sections (<div>s) are shown/hidden based on the current value of currentRoute.
     

Output-

How does Knockout.js handle routing in single-page applications (SPA)?

This method gives you basic routing functionality in the Knockout.js application. For more complex information (such as nested routes, routing parameters, etc.), using a dedicated routing library such as Sammy.js or Durandal.js may be more appropriate

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy