Iron:路由器url参数修改嵌套布局

时间:2014-10-24 02:42:34

标签: meteor iron-router

我真的很挣这个。如果你想查看我一起被击败的内容,那就是repo on GitHub called instructor-oracle。我想要做的是让着陆页成为./wbs的布局。然后我希望搜索路由到./wbs/:_wbsCode并使用适当的记录填充侧栏。我在想路由器的结构需要像......

Router.configure({
    layoutTemplate: 'layout'
});

Router.map(function () {

    this.route('wbs', {
        path: '/wbs'
    }, function () {
        this.render('wbs-detail', {
            path: '/wbs/:_wbsAbbrev',
            to: 'wbs-detail',
            data: function () {
                theOne = Wbs.findOne({abbrev: this.params._wbsAbbrev});
                console.log(theOne.abbrev);
                return theOne;
            }
        });
    });

......这将与像...这样的模板相提并论。

<template name="layout">
    <header class="container-fluid">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="{{pathFor 'wbs'}}">Instructor Oracle</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse">
                <form class="navbar-form navbar-left" role="search" id="wbsSearchForm">
                    <div class="form-group">
                        <input
                            class="form-control typeahead"
                            name="wbsSearch"
                            id="wbsSearch"
                            type="text"
                            placeholder="Search"
                            autocomplete="on"
                            spellcheck="off"
                            autofocus="true"
                        />
                    </div>
                    <button type="submit" class="btn btn-default">Find</button>
                </form>
            </div>
        </nav>
    </header>
    <main class="container-fluid">
        {{> yield}}
    </main>
</template>

<template name="wbs">
    <div class="col-sm-3" id="wbsCol">
        {{> yield 'wbs-detail'}}
    </div>
    <div class="col-sm-9" id="timesheetCol">
        <iframe src="http://iframeurl.html" id="timesheetFrame"></iframe>
    </div>
    {{#contentFor 'wbs-detail'}}
        <h1>{{abbrev}} <small>{{code}}</small></h1>
    {{/contentFor}}
</template>

...以及像这样的表单的事件处理程序......

Template.layout.events({

    // catch submit event for wbs form
    'submit': function (event, template) {

        // prevent default behavior and stop bubbling
        event.preventDefault();
        event.stopPropagation();

        // store dom element in variable
        var inputElement = template.find('input#wbsSearch');

        // access value in form and extract abbreviation if found
        var abbrev = Wbs.findOne({abbrev: (inputElement.value).toUpperCase()}).abbrev;

        // clear input
        inputElement.value = "";

        // go to the page
        Router.go('wbs-edit', {_wbsAbbrev: abbrev});
    }
});

我一直试图通过铁路来解决这个问题:路由器文档,但是现在我失去了各种各样的东西(显然)。尽管如此,我仍然需要这样做以避免在主布局模板上重新加载,因此ifbar不会重新加载,而侧边栏可以与匹配的URL一起更改,因此可以为特定侧边栏内容添加书签和共享链接。

提前感谢您的协助。如果我最终将所有这些都排除在外,我非常乐意为铁:路由器文档做出贡献,所以对于像我这样的下一个豌豆大白痴的人来说,这恰好需要解决这个问题。

0 个答案:

没有答案