Question

我正在构建一个有两种视图的应用程序：home＆amp;查看列表

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

我可以告诉第一部分有效，因为我正在输出'view'的值，当你点击列表名时输出值“viewList”，它只是不会改变模板。

我错过了什么？

我的代码：

mylists.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");
    }
  });
}

mylists.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>

Answer 1

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

运行

meteor add iron:router

lester在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});
    }
  });
});

现在有了这个，你可以为List集合中的每个对象提供动态模板，如果你转到localhost:300/listView/35dwq358ew，你会得到一些带有一些数据的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>

Meteor，如何在事件上更改模板（视图）？

1 个答案: