流星中的动态页面渲染
Posted
技术标签:
【中文标题】流星中的动态页面渲染【英文标题】：Dynamic page rendering in meteor 【发布时间】：2014-12-05 07:18:15 【问题描述】：页面渲染不适用于 Iron:router 请帮助我。渲染不适用于代码。请找到下面的附加代码。我们是用户流星添加铁：路由器 0.9.4。我们使用流星 0.9.3.1 .页面渲染不工作
<head>
</head>
<body >
<div>
> players
</div>
</body>
<template name ="editform">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="pff_name"/></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="pfl_name"/></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="email" name="pfemail"/></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="text" name="pfname"/></td>
</tr>
<tr>
<td>Company or Organization:</td>
<td><input type="url" name="pfname"/></td>
</tr>
</table>
</div>
</div>
</template>
<template name="players">
<div>
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>IP</th>
<th></th>
</tr>
#each scorers
<tr>
<td><a href=" pathFor 'editform' " > ip </a></td>
<td></td>
</tr>
/each
</table>
</div>
</template>
这个 router.js
Router.route("/", function()
this.render("route");
);
【问题讨论】：
【参考方案1】：对不起，直言不讳，但您确实需要阅读this。
在最上面写着：
Router.route('/', function ()
this.render('Home');
);
当用户导航到url“/”时，上面的路由会将名为“Home”的模板渲染到页面上。
您的路由器中有this.render("route"); 行，但没有名为“route”的模板。
【讨论】：
对不起，这是正确的。 this.render("editform"). 请帮帮我。提前致谢。 对不起，这是正确的。 this.render("editform"). 请帮帮我。提前致谢。@richsilv【参考方案2】：目前尚不清楚您要达到的目标。 我建议您从阅读Meteor Docs 开始。
对于像这样的简单应用，您可以使用如下结构： /client（客户端代码文件） /server（服务器端代码文件） collections.js Check out a good way of structuring your app here.
首先，这里不需要<head> 和<body> 标签。
然后，您可以在客户端文件夹中创建一个布局模板，您可以在其中设置要呈现的播放器模板，还可以将页眉、页脚等添加到您的页面。layout.html
<template name="layout">
>players
</template>
那么你还需要一个客户端文件夹中的播放器模板。
我将继续在这里制作一个简单的例子来帮助你。收集用户输入值，插入到 Players 集合 中，并使用 players 帮助器在 div.result 中为该集合中的每个玩家创建一个新表行.players.html
<template name="players">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" id="pff_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" id="pfl_name" /></td>
</tr>
</table>
<button class="insert">Submit</button>
</div><br/>
<div id="result">
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
#each players
<tr>
<td>firstname</td>
<td>lastname</td>
</tr>
/each
</table>
</div>
</div>
</template>
collections.js 创建一个名为 Players 的新 Meteor Collection，它将存储所有添加的文档。
Players = new Meteor.Collection("players");
players.js 在这里，players 助手将返回一个光标，并调用一个名为 addPlayer 的创建 Meteor 方法。
Template.players.helpers(
players: function()
return Players.find();
);
Template.players.events(
'click .insert': function(event, template)
var first = $('#pff_name').val();
var last = $('#pfl_name').val();
if(first !== "" && last !== "")
Meteor.call("addPlayer", first, last);
$('#pff_name').val("");
$('#pfl_name').val("");
);
server.js 将播放器添加到播放器集合
Meteor.startup(function ()
Meteor.methods(
addPlayer: function(fname, lname)
Players.insert(firstname: fname, lastname: lname);
)
);
routerer.js 告诉 Iron Router 渲染玩家模板
Router.map(function ()
this.route('players',
path: '/',
template: 'players',
layoutTemplate: 'layout'
)
);
编辑： 您使用的是 IronRouter 0.9.4 版，但您的路由是为新版本定义的。 将 IronRouter 更新为 iron:router@1.0.0-pre3 或遵循我为此版本提供的符号。
【讨论】：
谢谢你的回复其实我需要在meteor.@durrrr中渲染页面 我没有关注。这是流星。 @user2740350以上是关于流星中的动态页面渲染的主要内容，如果未能解决你的问题，请参考以下文章
Class 17 - 2 动态渲染页面爬取 — Splash
JavaScript 动态渲染页面爬取 —— 基于 Splash
JavaScript 动态渲染页面爬取 —— 基于 Splash