Meteor.js 应用程序模板中的多重收益

2023-12-13

我在布局文件中有一个用于iron-router的通用{{>yield}},它渲染我的页面,这些页面是模板。

在我的一个页面中,我有一个侧面菜单,根据此菜单中的选择,我想在此页面中加载与此页面相关的不同模板。

我怎样才能实现这个目标?


我用iron-router做了类似的事情layout template选项。假设我想创建一个主视图,其中的多个视图/模板会发生变化。首先我要声明我的路线:

Router.map(function () {
  this.route('home', {
  path: '/',
  template: 'myHomeTemplate',
  layoutTemplate: 'layout',
  yieldTemplates: {
    'myAsideTemplate': {to: 'aside'},
    'myFooter': {to: 'footer'}
    }
  });
});

布局模板的 html 如下所示:

 <template name="layout">
   <aside>
     {{> yield region='aside'}}
   </aside>

  <div>
    {{> yield}}
  </div>

  <footer>
    {{> yield region='footer'}}
  </footer>
</template>

以便在产量中指定模板aside and footer在指定位置进行渲染。对于您的情况,您可以指定sidemenu yield.

不,你有基本的布局和想法,你可以定义另一条路线。说我们称之为differentHome.

Router.map(function () {
  this.route('differentHome', {
  path: '/differentHome',
  template: 'myHomeTemplate',
  layoutTemplate: 'layout',
  yieldTemplates: {
    'myDifferentAsideTemplate': {to: 'aside'},
    'myDifferentFooter': {to: 'footer'}
    }
  });
});

请注意,在此路线声明中,我正在更改收益模板,但我不会更改将在主收益中呈现的基本模板。现在,在活动中,您可以重新路由,这将更改两个不同的收益模板:

Router.go("differentHome"); 

或者您可以使用 html 进行路由,例如使用链接。

编辑(随意解决方案):

使用会话变量来指示侧菜单选项。

HTML:
<template name="main">
  ......
   <div class="sideMenu">   
     {{#if sideMenu1}}
        {{> side1Template}}
     {{/if}}

     {{#if sideMenu2}}
        {{> side2Template}}
     {{/if}}
   </div>
 </template>

JS:
Template.main.helpers({
    sideMenu1 : function () {
         return Session.equals("sideMenuChoice", "sideMenu1")  
    },
    sideMenu2 : function () {
         return Session.equals("sideMenuChoice", "sideMenu2")  
    }
 });

现在,在一个事件中,将会话设置为任何 sideMenuChoice。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Meteor.js 应用程序模板中的多重收益 的相关文章

  • Meteor 文件上传不工作

    我已将包 cfs standard packages 和 cfs filesystem 添加到我的 Meteor 项目中 我想使用带有此输入的表单为我的博客上传精选图像 div class form group div
  • 如何让 minimongo.js 在浏览器中运行?

    The minimongo 的 github 演示 https github com mWater minimongo陈述为 客户端 mongo 数据库 通过 http 与服务器同步 还有一个还有一个minimongo 独立 https g
  • 如何在 Meteor 中读取依赖于另一个集合的集合

    我正在尝试从集合中加载最新的帖子 同时加载同一篇帖子的所有评论 该集合具有引用 而不是将整个文档存储在彼此内部 Post title body etc Comment postId body etc 我使用iron router作为路由包
  • Meteor - 使用 Meteor.wrapAsync() 包装 NPM

    我正在尝试使用 Meteor wrapAsync 包装超级代理 NPM 一切正常 直到下面代码的最后一行 这导致我的流星应用程序崩溃 var superagent Meteor npmRequire superagent Example o
  • 如何使用 Meteor Spacebars 模板动态渲染 HTML?

    假设我正在存储 div name div and div age div 在我的数据库中 然后我想获取第一个 HTML 字符串并将其呈现在模板中 gt template1 它只渲染第一个字符串 name 车把在里面 然后我想给出新生成的模板
  • 如何获取模板的所有实例?

    我知道我可以通过这样做获得一个模板实例Blaze getView node 但我怎样才能找到所有实例Template foo 如果我们借行走DOM http www javascriptcookbook com article Traver
  • Meteor 用户属性

    我希望能够在 Meteor 身份验证系统中将用户标记为 管理员 并允许该用户执行特殊操作 以及显示一些如果他们不是管理员则不会显示的 gui 元素 我已经尝试在用户对象上设置一个 admin 属性 这在服务器端可以正常工作 对于管理操作的
  • 带有 mrt 的流星 - 铁:路由器:没有这样的包

    我在学meteor 0 8 3并尝试使用一些基本的路由设置铁路由器 https github com EventedMind iron router My smart json包含 packages iron router git http
  • 如何强制 Meteor 重新加载订阅?

    在我的应用程序中 sections是一个链接到的集合courses通过一个名为course sectionIds 初始加载工作正常 但在管理面板中添加部分时遇到非反应式连接问题 这是路线 route adminCourse path adm
  • 纤维/未来实际上有什么作用?

    下面这行代码的作用是什么 Npm require fibers future 我在网上查找示例 发现了一些这样的示例 Future Npm require fibers future var accessToken new Future 什
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • Meteor Angular 2 应用程序中的警报仅在浏览器中单击后才会出现

    我已经在 Meteor Angular 2 应用程序的页面上实现了 ng2 bootstrap ngb alert 当我将警报推送到打字稿中的警报数组时 只有在再次单击浏览器窗口后才会显示警报 推送是在 Accounts createUse
  • 将 mongo 数组转换为具有键值对的对象

    我有一个包含字符串数组的 mongo 文档 我需要将这个特定的字符串数组转换为包含键值对的对象数组 以下是我目前的做法 id ObjectId 57e3720836e36f63695a2ef2 platform A1 available C
  • 如何在模板创建的元素上触发 JQuery .draggable() ?

    我在 Html 文件中有一个标准模板 例如
  • 在 Meteor.method 中调用函数返回未定义

    过去几天我一直在尝试从 Meteor 方法获取返回对象 每次我这样做我都会得到undefined在客户端上 Meteor methods CORSTest function let url www theverge com 2017 4 1
  • 如何调试性能问题/优化您的流星应用程序

    我刚刚将 Meteor 应用程序部署到 Digital Ocean 上的生产服务器上 我注意到 对于大约 7500 个文档 完全获取对象 有选择地仅获取 3 个字段 并填充自动完成数据大约需要 3 5 秒 我相信对于如此数量的数据来说 它应
  • Meteor账号-密码+账号-输入及密码确认

    我在帐户输入包和帐户密码包中都没有看到任何允许在帐户输入的注册表单中使用密码确认字段的选项 我错过了什么吗 不 它的包上没有验证密码字段 您需要自己使用简单的 JS 创建 if password validationPassword Met
  • Enzyme - 测试嵌套组件是否正确呈现

    我正在尝试测试当通过简单的布尔值更新状态时 在父组件中其子组件是否正确呈现 在父组件下面 class Parent extends Component render const isReady this state const props
  • 在 Meteor 中重绘模板期间加载消息

    我构建了我的第一个 Meteor 应用程序 我喜欢它 不过 现在它已经有了真实的生产数据 所以速度有点慢 我收到报告称 当我点击此按钮时没有任何反应 有什么方法可以在模板重绘期间显示加载消息 以便用户知道正在发生什么事情 为了进一步说明 请
  • 带有流星的网站图标?

    我正在尝试将网站图标加载到我的 Meteor 项目中 但无法让它工作 我尝试使用this https stackoverflow com questions 20054788 how to load a favicon with meteo

随机推荐

  • INSERT,并获取自增值

    考虑下表 create table language id integer generated always as identity START WITH 1 INCREMENT BY 1 name long varchar constra
  • 在 PHP 中迭代嵌套数组

    我在此链接上有一个嵌套数组阵列样本 我正在使用下面的代码来解析它 但第二次和深度之外它什么也没有返回 但是尝试使用递归函数 printAllValues ArrXML function printAllValues arr keys arr
  • android中没有创建数据库

    在我的应用程序中 活动运行良好 但未创建数据库 logcat 中也没有错误 主要活动类别 package com example testdb import android os Bundle import android app Acti
  • vba sumifs单列中的多个条件

    假设我在 A 列和 B 列中有这样的内容 A 5 A 1 3 A 2 2 A 3 3 A 4 4 我想做 Application SumIfs range b b range b b A A 2 但这不起作用 数组值 我希望不经历 EVAL
  • 计算 MongoDB 中另一个字段分组的文档中某个字段中字符串实例的数量?

    我有一个特定的用例 我正在尝试找到一种方法在一个聚合管道中完成它 并且最好不需要对任何数据值进行硬编码 我想根据一个属性对文档进行分组 并查看文档中特定字段的值计数 示例数据 flightNum DL1002 status On time
  • Cocos2d 获取当前时间(以毫秒为单位)

    我尝试用谷歌搜索 但仍然找不到最佳答案 我想要的很简单 我只想获取当前时间 以毫秒为单位 我怎样才能在 cocos2d 中做到这一点 首先 一个类变量 CGFloat gameTime 然后在你的类中初始化 self scheduleUpd
  • 简单的xml添加属性

    当我使用 PHP 在 XML 中添加新元素时 如何设置属性 我的PHP代码是这样的
  • 在C中将int数组更改为float数组

    有谁知道如何将整数数组转换为浮点数组 你的问题措辞不好 但是 假设您已经声明了整数数组 您可以尝试如下操作 instantiate float array float fArray sizeOfIntArray step through e
  • 阅读 SICP 时使用什么解释器? [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我正在阅读 SICP 书 网址为http mitpress mit edu sicp 要运行示例代码 我应该使用哪个解释器 我考虑过 Eclipse 的 Dandelion Lisp
  • 修改j2me midlet

    我想更改开源应用程序中的一些字符串 测试目的 所以我使用 jad 反编译器反编译我的应用程序 原始类文件http dl dropbox com u 32657135 YourTube class 发出命令Jad exe Yourtube j
  • 具有多个规则的 jQuery 表单验证插件

    我正在使用 jQueryValidation 插件 Problem 我想在一个输入字段中使用多个模式规则 例如 form validate rules email required true email true password requ
  • 每季度生成日期序列

    我想生成一个日期序列one quarter间隔 具有开始日期和结束日期 我有以下代码 gt seq as Date 1980 12 31 as Date 1985 06 30 by quarter 1 1980 12 31 1981 03
  • 在手机间隙运行 https 请求

    我正在iPhone中开发phone gap应用程序 我想使用JQuery getJSON url function 访问https json 请求 但仅在应用程序中它不会返回任何内容 但在正常的移动Safari中它工作正常 尽管它在phon
  • 如何使用 watchOS 2 SDK 构建应用程序

    在上次提交申请时 我们收到了此警告 WatchKit 支持无效 从 2018 年 4 月 1 日开始 提交到 Apple Watch App Store 的所有应用程序都必须使用 watchOS 2 SDK 或更高版本构建 检查您的部署目标
  • 仅沿第三维在 3D 逻辑数组中使用 Matlab“查找”

    我有一个 3D 逻辑数组 例如 A randi 0 1 x y z 其中 x y z 是整数 有没有办法找到每个 x y 沿第三维 z 的第一个真值 我可以像这样循环执行 B zeros x y for ix 1 x for iy 1 y
  • 如何将自定义ListAdapter设置为appwidget中的列表视图?

    我有一个列表视图 我需要为每个列表项提供一个自定义视图 因此我创建了一个自定义 ListAdapter 它提供了视图和布局 如下所示 但是如何使用 RemoteViews 将这个 listAdapter 设置为小部件中的 ListView
  • 程序集编号转 ascii

    我正在使用 intel 上的 at t 语法来处理汇编程序 我迷路了 如何将寄存器中的整数转换为 ASCII 数字 假设我想转换数字 10 我会将数字 10 放入寄存器 eax 中 如果我只是将数字 48 添加到 eax ascii 符号将
  • ZipArchive::close():读取错误:是一个目录

    我试图找出这个问题 但我无法想象为什么它一直发生 我正在将文件添加到 ZipArchive 当我尝试关闭它时 它收到目标是目录的错误 但我很确定事实并非如此 这是 zip 函数的代码 function create zip folder d
  • 打算打开Goog​​le身份验证器

    有没有办法通过 Intent 打开 Google Authenticator 如果是 是否可以使用已填充的密钥来打开它 以使其对用户实用 我有一个更通用的代码 因此 您只需将包名称作为参数发送给方法openApp Context conte
  • Meteor.js 应用程序模板中的多重收益

    我在布局文件中有一个用于iron router的通用 gt yield 它渲染我的页面 这些页面是模板 在我的一个页面中 我有一个侧面菜单 根据此菜单中的选择 我想在此页面中加载与此页面相关的不同模板 我怎样才能实现这个目标 我用iron