Question

I have been looking at this for quite few hours and I don’t think I am able to see the solution.

This is my router.js:

    define('router', ['jquery', 'config', 'nav','store'], function ($, config, nav, store) {

    var
        concepTouch = Sammy('body', function () {
        // This says to sammy to use the title plugin
            this.use(Sammy.Title);
            this.use(Sammy.Mustache);
        // Sets the global title prefix
        this.setTitle(config.title.prefix);
        // So I can access sammy inside private methods
        var sammy = this;

        function establishRoutes() {
            // Defines the main container for content then
            var mainConainer = $(config.mainContentContainerId);
            // Adds animation loading class to the main container
            mainConainer.addClass(config.loadingAnimationCssClass);
            // iterates through routes defined in config class then
            _.forEach(config.appRoutes, function(obj, key) {
                // defines each one as a route
                sammy.get(obj.hashV, function(context) {
                    // Store the requested route as the last viewed route
                    store.save(config.stateKeys.lastView, context.path);
                    // Fetches its html template
                    context.render(obj.tmpltURL, { 'routeData': context.params })
                        // Appends that htmlo template to the main container and removes loading animation
                        .then(function(content) {
                            mainConainer.removeClass(config.loadingAnimationCssClass).html(content);
                        });
                    // Finally adds the route title to the prefix
                    this.title(obj.title);
                });

                // Overriding sammy's 404
                sammy.notFound = function () {
                    // toast an error about the missing command
                    toastr.error(sammy.getLocation() + ' Does not exist yet!');
                    // Go to last visited anf if not 
                    sammy.setLocation(
                        store.fetch(config.stateKeys.lastView) || config.getDefaultRoute()
                    );
                };
            });
        }
        // Calls for routes to be established
        establishRoutes();        
        }),   
        // runs concep touch as a sammy App with the initial view of default route
        init = function () {            
            // Try to get today's last visit and if not available then fallback on default
            concepTouch.run(store.fetch(config.stateKeys.lastView) || config.getDefaultRoute());
            // Make the correct nav item active and add Click handlers for navigation menu
            nav.setStartupActiveClass(store.fetch(config.stateKeys.lastView) || sammy.getLocation())
                .addActiveClassEventHandlers();
        };    
    return {
        init: init,
        concepTouch: concepTouch
    };
});

This when I submit the search form gets this template for me:

<div id="contacts" class="view animated fadeInLeft">
    <h3>Search results for {{routeData}}</h3>
    <ul data-bind="template: { name: 'searchresults-template', foreach: searchResults }"></ul>
</div>
<script type="text/html" id="searchresults-template">
    <li data-bind="text: type"></li>
</script>

<script>
    require(['searchresults'], function (searchresults) {
        searchresults.get(to Some how Get routeData.term);
    });
</script>

and I can not find the right way to make Mustache pass the data from this line of router.js context.render(obj.tmpltURL, { 'routeData': context.params }) to the {{routeData.term}} inside the template.

{{routeData}} on its own returns `SAMMY.OBJECT: {"TERM": MY SEARCH TERM}`

which I can’t navigate to the property i want to from it using . notation. Furthermore even if that worked it can not be passed into Javascript which is what I really need as

searchresults.init(); is waiting for this paramter `searchresults.init(routeData.term);`

Or maybe the answer is to find a way to access sammy’s context here? outside of sammy in order to get the params? something like Sammy.Application.context.params['term'] but ofcourse application has no such method so don’t know!? 🙁

Am I going totally the wrong way about it? How Can I easily pass the query string params as accessible objects inside my template so knockout can use it.

Your help is greatly appreciated.

Answer 1

<div id="contacts" class="view animated fadeInLeft">
    <h3>Search results for {{#routeData}}{{term}}{{/routeData}}</h3>
    <ul data-bind="template: { name: 'searchresults-template', foreach: searchResults }"></ul>
</div>
<script type="text/html" id="searchresults-template">
    <li data-bind="text: type"></li>
</script>

<script>

    require(['searchresults'], function (searchresults) {
        var searchTerm = "{{#routeData}}{{term}}{{/routeData}}";
        searchresults.get(searchTerm);
    });
</script>