javascript - meteor ，如何更改事件模板( View )？-6ren

javascript - meteor ，如何更改事件模板( View )？

转载作者：数据小太阳更新时间：2023-10-29 05:12:19

26

4

我正在构建一个有两个 View 的应用:主页和 View 列表

当用户在主页 View 上点击列表名称时，它应该更改为“ View 列表”模板。我添加了一个名为“view”的 session 变量，在启动时将其设置为“home”。当在主屏幕上的其中一项(列表名称)上检测到单击事件时，它将 View 的值更改为“viewList”。然后在 HTML 中，如果“view”是“home”，我有一个 if 语句来显示 home 模板，否则显示“viewList”模板。

我可以看出第一部分是有效的，因为我正在输出“view”的值，并且当您单击列表名称时它会输出值“viewList”，只是不会更改模板。

我错过了什么？

我的代码:

我的列表.js:

Lists = new Mongo.Collection("lists");

if (Meteor.isClient) {
  Meteor.startup( function() {
    Session.set("view", "home");
  });

  Template.main.helpers({
    view: function () {
      return Session.get("view");
    }
  });

  Template.home.helpers({
    lists: function () {
      return Lists.find({}, {sort: {lastUsed: -1}});
    }
  });

  Template.home.events({
    "submit #new-list": function (event) {
      var name = event.target.listName.value;
      Lists.insert ({
        name: name,
        createdAt: new Date(),
        lastUsed: new Date()
      });
    },
    "click .list-row": function (event) {
        Session.set("view", "viewList");
    }
  });
}

我的列表.html:

<head>
  <title>My Lists</title>
</head>

<body>
    {{> main}}
</body>

<template name="main">
    {{view}}
    {{#if view "home"}}
        {{> home}}
    {{else}}
        {{> viewList}}
    {{/if}} 
</template>

<template name="home">
  <header>
    <h2>My Lists</h2>
  </header>
    <ul id="lists">
        <li>
            <form id="new-list">
                <input type="text" name="listName" value="My List 1">
                <input type="submit" value="Save">
            </form>
        </li>
        {{#each lists}}
            {{> list}}
        {{/each}}
    </ul>
</template>

<template name="viewList">
  <header>
    <h2>View List</h2>
  </header>
<!-- list details will show here -->
</template>

<template name="list">
    <li class="list-row" id="{{_id}}">{{name}}</li>
</template>

最佳答案

如果您想从模板 View 进行更改，我建议您安装 iron:router包。

运行

meteor add iron:router

莱斯特创造了 routes.js在 /lib 上文件夹

现在让我们一步一步来。

首先在 myAppName/client/views/layout.html 上创建 1 个模板

<template name="layout">
   {{> yield}}
</template>

并使用此代码更新 routes.js。

Router.configure({
    layoutTemplate: 'layout' // here we say that layout template will be our main layout
});

现在在同一个 routes.js 上创建这 2 条路线。

Router.route('/home', function () {
  this.render('home');
});

Router.route('/viewList', function () {
     this.render('viewList');
  });

如果您导航到 localhost:3000/home，则使用它或 /viewList你会在那里看到 html 内容。

备注:<header>在模板中您不需要它。

现在这只是一个例子，因为我真的不知道你的主要想法是什么。

您正在调用 {{#each lists}}在home里面模板，那么拥有 viewList 有什么意义呢？模板？

现在如果您想为每个列表创建单独的动态路由，您可以试试这个。

Router.map(function () {
  this.route('listViews', {
    path: '/listViews/:_id',
    waitOn: function(){
        return Meteor.subscribe('lists')
    },
    data: function(){
      return Lists.findOne({_id: this.params._id});
    }
  });
});

现在有了这个，如果您转到 localhost:300/listView/35dwq358ew，您就拥有了 List 集合中每个对象的动态模板。例如，您将使用一些数据渲染 listView。

你可以在模板列表中做这样的事情

<template name="list">
    <li class="list-row" id="{{_id}}">{{name}}</li>
    <li><a href="/listViews/{{this._id}}">Check this List in detail</a></li>
</template>

viewList 模板将如下所示。

<template name="viewList">
    <h2>{{title}}</h2>
<!-- list details will show here -->
    {{informationAboutList}}
</template>

关于javascript - meteor ，如何更改事件模板( View )？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28535863/

26

4

0

文章推荐： ios - 代码覆盖率结果与 Xcode 7 中的实际覆盖率不准确

文章推荐： javascript - benchmark js 的结果是什么意思？

文章推荐： javascript - 如何使除特定元素之外的所有元素变暗

meteor - Meteor.com meteor 托管什么时候才能足够可靠以供生产使用？
我在尝试在 Meteor.com 上托管的经历非常复杂。我经常收到“此网站已关闭。稍后再试。”。一开始我不知道为什么，但后来我怀疑问题是我不小心恢复了“system.users”集合造成的。我尝试在
meteor - 通过 Meteor Up 或 tmux Meteor 部署 Meteor 应用程序
我有点好奇，与复制 Meteor 应用程序、启动 tmux session 并仅运行 meteor 相比，Meteor Up(或其他 Meteor 应用程序部署过程，如 Modulus)是否能做任何花
meteor - meteor 方法和 meteor 发布/订阅之间的差异
我与meteor 合作创建了一个应用程序。在 meteor Meteor.methods 和 Meteor.publish 用于执行数据库操作。 I know use of Meteor method
meteor - 如何确定我的 meteor 项目中使用了哪些 meteor 包
我有一个相当大的 meteor 项目并安装了几个 meteor 包。我这样做只是为了试用一个 meteor 包，看看它是否适用于我的项目。不幸的是，在确定我不需要在我的项目中安装这些包后，我没有卸载这
meteor - "meteor"与 "meteor bundle"用于生产
对于生产为什么我应该“捆绑” meteor 应用程序而不仅仅是复制服务器上的源使用“ meteor ”命令？基本上有什么区别: “meteor bundle app.tar.gz”，然后安装正确版
meteor - 使用 meteor 帐户在 Meteor 中为用户添加个人资料图片
我是 Meteor 的新手，我想知道我们如何要求用户在创建帐户时上传他的图片？我正在使用基本的 Meteor 帐户来创建用户帐户。我希望用户能够上传他的图片，并且还能够在他登录时和在我网站的登录页面上
meteor - angular2-meteor 样本在 meteor 更新后停止工作
我正在学习 Meteor Angular 2 教程。在第 6 步，我随机尝试了“ meteor 更新”，这使我的样本崩溃了。更新有效，服务器正在启动。然而，浏览器屏幕现在保持空白，并且在控制台中出现错
meteor - meteor 表排序
在我的 meteor app我需要实现表格排序。现在我正在做的是设置一个 session variable对于每个列并根据要排序的项目切换其值。任何人都可以提出更好的选择吗？最佳答案我推荐表格
meteor - meteor 中的重置密码问题
我向用户发送了注册电子邮件，当他输入密码和其他详细信息时，我试图重置密码，但它抛出错误 uncaught error extpected to find a document to change 正如
meteor - meteor 服务器什么时候重启？
我运行排行榜示例。然后我更改了 leaderboard.js 中的 names 变量(Meteor.startup 函数参数初始化的一部分)中的科学家条目之一并保存了文件。我应该期待 meteor
meteor - meteor 在哪里存放它的包裹？
我有一个 meteor 1.0 应用程序。我添加了一堆包，例如:meteor add kevohagan:ramda .但我在任何地方都找不到它。我什至无法在我的系统上找到它。在我的项目中: $>
meteor - meteor 中的页面转换？
我有一个 meteor 移动应用程序在结构上工作；我真的需要将 View 与一些页面转换拼接在一起。我看了iron-transitioner项目，但看起来开发已经停止？ (最后一次提交 6 个月前，
meteor - Meteor 上的手写笔问题
我在“发现 meteor ”一书之后构建了我的第一个 meteor 添加。但是我现在遇到了以下错误: 错误:在ian:accounts-ui-bootstrap-3 中没有找到accounts_ui
meteor - meteor 应用程序可以负载平衡吗？
是否可以在负载均衡器后面使用 Mongodb 运行 meteor 应用程序的多个实例？似乎如果一个应用程序的多个实例在不同的服务器上运行，那么它们就不会知道其他实例对 Mongo DB 所做的更改
meteor - 如何正确使用 Meteor.connect() 连接另一个 Meteor 服务器
我在/client/main.coffee 中的新客户端代码 Xingyun = Meteor.connect "localhost:3000" System = new Meteor.Collect
meteor - 在 Meteor 中，this.error 和在 Meteor.publish 中抛出新的 Meteor.Error 有什么区别？
在 Meteor.publish ，使用 this.error 有什么区别并简单地抛出 Meteor.Error ? 最佳答案 this.error仅在发布方法内可用。每 the docs : Sto
meteor - Meteor 的不同数据库和前端
假设我想在 Meteor 的后端使用与 Mongo 不同的数据库，并且还想在前端使用像 D3.js 这样的可视化库。目前有可能吗？如果不是我自己添加它会有多复杂？谢谢最佳答案 https://
meteor - Meteor 应用程序中的元素保存错误
我已经在 Meteor 中制作了一个 watch-as-I-type 实时聊天服务，但是我在 Meteor 中的内置元素保存功能方面遇到了麻烦。基本上，当输入的文本具有焦点时，我需要不更新当前的聊天消
meteor - 在离线模式下使用 Meteor
我想知道 Meteor 是否可以与我的用例一起使用。我有一个可在 App Store 上使用的移动应用程序。这个应用程序包含一个小调查，用户将在没有互联网连接的情况下做出回应。然后用户将关闭应用程序
meteor - 卸载 meteor
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 8年前关闭。 Improve this q

首页

博学

6Ren·AI

商城

javascript - meteor ，如何更改事件模板( View )？