1

我已经看了好几个小时了，但我认为我看不到解决方案。

这是我的 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.jscontext.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 之外？类似Sammy.Application.context.params['term']但ofcourse应用程序没有这样的方法所以不知道！？:(

我是否完全走错了路？如何轻松地将查询字符串参数作为模板中的可访问对象传递，以便淘汰赛可以使用它。

非常感谢您的帮助。

4

1 回答 1

0 
<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>
于 2012-10-29T17:50:15.410 回答