我正在构建一个包含两个视图的应用程序:主页和视图列表
当用户在主视图上单击列表的名称时,它应该更改为"视图列表"模板.我添加了一个名为"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>
如果你想从模板视图更改我建议你安装铁:路由器包.
跑
meteor add iron:router
lester routes.js在/lib文件夹上创建
现在让我们一步一步来做.
首先创建1个模板 myAppName/client/views/layout.html
<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>
| 归档时间： |
|
| 查看次数： |
2695 次 |
| 最近记录： |