Router best use, are templates better?

2 posts, 0 answers
  1. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 14 Aug 2014 Link to this post

    I made a router for my spa, and it's working, but I just want to make sure I'm doing it right since there's no demo for routing and people have done it differently.
    It looks like it works great, but do most people use angular for the routing?  I'd rather not load another library, but maybe there's more features, I don't know.  I can't seem to find may real world examples.

    I saw a course on Plural site using it and they put everything in kendo templates. (main below is a kendo template render on the div root).
    //Initialize New Router
    router = new kendo.Router({
        init: function () {
            main.render("#root")
        }
    });
    For me, my root is never going to change, it's the header so I didn't put my main header in a view.  There's no benefit in the is there?

    Is my following code good for my spa?  Should I add push state?  When I do, things mess up cus my site isn't on the '/' directory.
    <section class="header main">
        <nav>
            <a id="nav-toggle" href="#"><span></span></a>
            <ul>
                <li><a id="linkHome" href="#">Home</a></li>
                <li><a id="linkClients" href="#">Clients</a></li>
                <li><a id="linkReports" href="#">Reports</a></li>
            </ul>
        </nav>
        <div class="brandmark">
            <img src="/images/brandmark-snap-light.png">
        </div>
        <div class="searchBox">
            <input type="search" class="k-input toggle">
        </div>
    </section><!-- / .header.main -->
    <div id="content" >
      
    </div>
     
    <script>
        var router;
        var menu;
     
        //Initialize New Router
        router = new kendo.Router({
           init: function () {
               router.navigate("HomeSA");
            }
        });
     
        router.route("/", function () {
        });
     
        router.route(":firstLevel", function (firstLevel) {
            $("#content").load("Content/" + firstLevel + "Page.html");
        });
        $(function () {
            router.start();
            $("#linkHome").click(function () {
                router.navigate("HomeSA");
                $('section.main.header ul').slideToggle();
                return false;
            });
            $("#linkReports").click(function () {
                router.navigate("Report");
                $('section.main.header ul').slideToggle();
                return false;
            });
            $("#linkClients").click(function () {
                router.navigate("Client");
                $('section.main.header ul').slideToggle();
                return false;
            });
        });

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 15 Aug 2014 Link to this post

    Hello Dan,

    the push state behavior needs an additional router configuration option - `root`. I would like to suggest that you review the router documentation for more details and samples. You may also review the sushi and aeroviewr sample applications source code - they are available in the bundle we ship. 

    Apart from that, using AngularJS is also an option, but it is a full stack solution with a lot of other features. Of course, Kendo UI loves AngularJS, and we are committed to supporting that scenario too.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top