meteor 铁路由器嵌套路由

标签 meteor nested iron-router

我有两个具有一对多关系的 meteor 集合:建筑物和空间

在我的建筑页面上,我想显示与建筑相关的空间。

现在,我是这样做的:

buildingsRoute.coffee
    BuildingController = RouteController.extend(template: "buildings")
    Router.map ->
      @route "building",
        path: "/buildings/:_id"
        waitOn: ->
          subs.subscribe "allBuildings"
          subs.subscribe "allSpaces"

        data: ->
          building: Buildings.findOne(@params._id)
          spaces: Spaces.find({building_id: @params._id})

建筑 Jade :
template(name="building")
        +with building
            .building
                .page-header.position-relative
                    h1.inline #{name}
                .row
                    .col-xs-12
                       +spacesList

template(name="spacesList")
    .widgets
        .row
            h1 Spaces
            +each spaces
                .col-xs-12.col-sm-6
                    .widget-box.widget-color-purple
                        .widget-header
                            a(href="{{pathFor 'space'}}") #{name}
                        .widget-body
                            p Content here

这不起作用,我猜是因为spacesList模板的数据上下文与铁路由器定义的用于构建的数据上下文不同。

我可以用“+each ../spaces”替换“+each space”,但这对我来说似乎不是一个非常通用的解决方案(如果我想在另一个上下文中使用我的spacelist模板怎么办?)

所以我尝试在模板助手中定义数据上下文,如下所示:
Template.spacesList.helpers
  spaces: Spaces.find({building_id: @params._id})

但我收到错误消息:
Spaces is not defined.

所以我有点困惑。正确实现嵌套路由的 meteor 方式是什么?

谢谢!

编辑:

Spaces 集合的定义:/models/space.coffee
@Spaces = new Meteor.Collection("spaces",
  schema:
    building_id:
      type: String
      label: "building_id"
      max: 50

    name:
      type: String
      label: "Name"
      optional: true
      max: 50

    creation_date:
      type: Date
      label: "Creation date"
      defaultValue: new Date()
)

出版物:/server/publications.coffee
# Buildings

    Meteor.publish "allBuildings", ->
      Buildings.find()

    Meteor.publish "todayBuildings", ->
      Buildings.find creation_date:
        $gte: moment().startOf("day").toDate()
        $lt: moment().add("days", 1).toDate()



    # Publish a single item
    Meteor.publish "singleBuilding", (id) ->
      Buildings.find id


    # Spaces
    # Publish all items
    Meteor.publish "allSpaces", ->
      Spaces.find()

编辑 2

经过一番研究,我终于想出了一个解决方案:
Template.spacesList.helpers
  spaces: () ->
    if Router._currentController.params._id
      subs.subscribe "buildingSpaces", Router._currentController.params._id
      Spaces.find()
    else
      subs.subscribe "allBuildings"
      Spaces.find()
  nbr_spaces: () ->
    Spaces.find().count()

附加出版物:
# Publish all items for building
Meteor.publish "buildingSpaces", (building_id) ->
  Spaces.find({building_id: building_id})

错误是:
  • 空间定义未包装到函数中的事实
  • 我用不太性感的 Router._currentController.params._id 替换的 @params._id 但我找不到任何快捷方式。

  • 我仍然不知道这是否是管理嵌套路由的 Meteor(最佳)方式...

    有更好的推荐吗?

    最佳答案

    在经历了很多不同的选择之后,我终于找到了一个我以前没有注意到的铁路由器选项。这就产生了魔力。

    通过使用 yields,嵌套路由的实现(至少有两个级别(我没有尝试更多级别))变得更加容易:

    我的路线是这样的:

    Router.map ->
      @route "buildingSpaces",
        path: "/buildings/:_id/spaces"
        template: "building"
        yieldTemplates: {
          'buildingSpaces': {to: "subTemplate"}
        }
        waitOn: ->
          [subs.subscribe("allSpaces"),
           subs.subscribe "allBuildings"]
    
        data: ->
          building: Buildings.findOne(@params._id)
          spaces: Spaces.find({building_id: @params._id})
    

    这些是我的模板:
    template(name="building")
        .animated.fadeIn
            +with building
                    .building
                        .page-header.position-relative
                            h1.inline #{name}
                        .row
                            .col-xs-12
                                .tabbable
                                    ul.nav.nav-tabs
                                        li#menu-spaces(class="{{isActive 'buildingSpaces'}}")
                                            a(href="{{pathFor 'buildingSpaces'}}") #{nbr_spaces} Spaces
                                        li#menu-dashboards(class="{{isActive 'buildingDashboards'}}")
                                            a(href="{{pathFor 'buildingDashboards'}}") Dashboards
                                    .tab-content
                                        +yield "subTemplate"
    
    
    template(name="buildingSpaces")
        .animated.fadeInDown
            .page-header.position-relative
                a.btn.btn-info.btn-sm#newSpaceButton
                    i.ace-icon.fa.fa-plus
                    | New space
            .clearfix
            +spacesList
    
    template(name="spacesList")
        .widgets
            .row
                +each spaces
                    .col-xs-12.col-sm-6
                        .widget-box.widget-color-purple
                            .widget-header
                                a(href="{{pathFor 'space'}}") #{name}
                            .widget-body
                                p Content here
        +insertSpaceForm
    

    最后,我有一个 helper 来管理我的菜单:
    Handlebars.registerHelper "isActive", (template) ->
      currentRoute = Router.current().route.name
      if currentRoute and template is currentRoute then "active" 
      else ""
    

    它很光滑。单击子菜单时,它仅加载子模板。这是我找到的最好的...

    希望这可以帮助...

    关于 meteor 铁路由器嵌套路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24725081/

    相关文章:

    javascript - iOS Safari 双击按钮问题

    javascript - 如何使用 meteor 自动更新传单 map 上的标记

    flutter - Flutter/Dart-嵌套的水平和垂直PageView构建器?

    c++ - 结构内部结构数组的段错误问题

    javascript - 如何遍历 Meteor 模板中的所有现有用户?

    javascript - 将 Iron Router 参数传递给 pathFor Helper

    javascript - JS 内部无法访问iron-router 数据

    javascript - 合并 2 个 Meteor JS 元素

    嵌套在函数中的快速结构

    ubuntu - 为什么 meteor 无法打开数据库文件?