javascript - 无法将数据从 Sammy 传递到 knockout 模板

Question

我已经研究了这个问题好几个小时了，但我认为我无法找到解决方案。

这是我的 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
    };
});

当我提交搜索表单时，我会得到这个模板:

<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>

我找不到正确的方法让 Mustache 将 router.js 这行数据传递到 context.render(obj.tmpltURL, { 'routeData': context.params })模板内的 {{routeData.term}}。

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

我无法使用它导航到我想要的属性。符号。此外，即使这有效，它也无法传递到 Javascript 中，而这正是我真正需要的

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

或者也许答案是找到一种方法来访问 Sammy 的上下文？在萨米之外为了获取参数？类似 Sammy.Application.context.params['term'] 但应用程序当然没有这样的方法，所以不知道!？ :(

我的做法完全错误吗？如何轻松地将查询字符串参数作为模板中的可访问对象传递，以便 knockout 可以使用它。

非常感谢您的帮助。

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>