试图触发模板渲染的流星会话
[英]Meteor session trying to trigger template render
问题描述
目前我遇到了meteor会话以及我的代码如何触发它来呈现模板。 目前我有一个会话，它将._id设置为点击的内容。
Template.sidebar.events({
/* on click of current sidecat class change to sidecat selected */
'click .sidecat': function (event) {
Session.set("selected_project", this._id);
}
});
如果selected_player等于div，我会添加一个css类。
Template.sidebar.sidebarselected = function () {
return Session.equals("selected_project", this._id) ? "sidebarselected" : '';
}
现在我在sidebarselected和另一个类存在时渲染模板。 单击该项目时，它将呈现模板。
Template.sidebar.projectselected = function() {
var find = Session.get("selected_project");
var find2 = ($("#"+find).attr('class'));
/* if exists return true render the template */
if (find2 == 'project sidebarselected')
{
return true
}
/* else don't render it return null */
else {
return null
}
};
到目前为止，一切都很有效。 现在我有一个Button，它在列表中创建一个新项目并使其成为所选项目。 这是麻烦发生的时候。 当我创建一个新项时，列表项被渲染并给出类sidebarselected，但它不呈现应该调用的模板。 单击某个项目时，它会渲染模板。 但不是在使用按钮创建新列表项时。 它被选中但不渲染模板。 这是代码。
Template.sidebar.events({
/* add bar settings menu functions for clicks */
'click #newProject': function(event){
var create = NewProject();
Session.set("selected_project", create);
},
这是NewProject功能
/* add a new project to the side bar */
function NewProject() {
id = Aprojects.insert({
name: "New Project",
type: "project"
});
doc = Aprojects.findOne({_id:id});
return doc._id;
}
好吧有一切。 单击按钮时会创建项目，添加类但不呈现模板。 这是所有的JavaScript，如果html需要让我知道，我会提供它。
让我添加一些细节和html模板的东西。 但无论如何，工作是什么
- 您可以在列表中选择一个项目
- 当您选择一个项目（通过点击它）时，它会给出一个类名来表示它已被选中
- 当您单击“新项目”时，您想要将项目添加到列表中并立即选择它
一切正常。 问题是单击新项目按钮时。 它仍然正确地选择新制作的项目并给它一个选定的类。 如果它发现selectedbar类也有一个带有它的项目类，那么它不会发生什么。 它呈现一个单独的模板（projectpicked）。 单击项目时会显示Projectpicked。 不是在点击#newproject时。 即使通过它最终选择它也不会显示projectpicked模板。 让我看看代码是否可以做更多的谈话。
<body>
{{> sidebar}}
</body>
<template name="sidebar">
{{#if aproject}}
{{#each aproject}}
<div class="sidecat {{sidebarselected}} project" id="{{divids}}">
{{name}}
</div>
{{/each}}
{{/if}}
{{#if projectselected}}
{{> projectpicked}}
{{/if}}
</template>
<template name="projectpicked">
project was picked from sidebar
</template>
应用程序逻辑和DOM结构组合背后的原因是我除了类别之外还有其他项目。 我认为使用session获取id然后我们找出它是什么类的项目或类别，并根据它是什么类显示不同的模板。 不知道它是否是最好的方式，但这是我想出来的。 接受建议。 如果有些事情不清楚我不知道，我会试着解释一下。 谢谢您的帮助。
2 个解决方案
解决方案1
2 2013-02-27 01:46:50
我会重写projectselected帮助程序，不依赖于HTML类名来执行其逻辑，而是依赖于Session值。 您在大多数代码中都正确使用了Session ，但是将应用程序逻辑与DOM结构相结合似乎很奇怪。
您的代码目前的工作方式（没有看到您的HTML模板 - 您也应该发布它！），看起来您希望它执行以下操作：
- 您可以在列表中选择一个项目
- 当您选择一个项目（通过点击它）时，它会给出一个类名来表示它已被选中
- 当您单击“新项目”时，您想要将项目添加到列表中并立即选择它
这是我如何解决这种情况：
你的模板
<body>
{{> sidebar}}
</body>
<template name="sidebar">
<ul>
{{#each items}}
<li class="{{selected}} project" id="id_{{_id}}">{{_id}}</li>
{{/each}}
{{> newproject}}
</ul>
{{> projectpicked}}
</template>
<template name="newproject">
<li id="newproject">Create a new project</li>
</template>
<template name="projectpicked">
{{#if projectpicked}}
A project was picked!
{{/if}}
</template>
你的javascript
// When clicking an item in the list, remember which one we just clicked
Template.sidebar.events({
"click li": function() {
Session.set("selected_project", this._id);
}
});
// Add the selected class to the item that was remembered
// by the session when we clicked on it
Template.sidebar.selected = function() {
return Session.equals("selected_project", this._id) ? "selected" : "";
}
Template.sidebar.items = function() {
// or whatever code you have to return the list of items
return Projects.find();
}
// when clicking the new project button, create the new project
// and remember the id, then store that as the selected value in the session.
Template.newproject.events({
"click #newproject": function() {
var newprojectId = newProject(); // do your thing
Session.set("selected_project", newprojectId);
}
});
Template.projectpicked.projectpicked = function() {
return !Session.equals("selected_project", undefined);
}
这里的关键是仅在单击某些内容时设置selected_project会话值。 这发生了两次; 单击某个项目以选择它时，以及单击新项目时。
要使模板绘制所选项目，您在Meteor中需要做的就是在选择项目时进行描述：当某个会话值与其ID匹配时，选择项目。 就这样。
我没有测试过这段代码，但它显然是不完整的，但希望这可以指出你在重构代码方面的正确方向。
解决方案2
0 已采纳 2013-03-01 17:20:46
好吧，在相当沮丧并重写大部分代码后，我发现了问题。 在我的projectpicked模板中，而不是使用Session.get，然后使用它来查找类。 而不是我只有一个
if ($('.sidecat.project').hasClass('sidebarselected')) {
return true
}
原来是：
if (find2 == 'project sidebarselected')
{
return true
}
所以我使用了一些jquery，而不是直接将变量find2与字符串进行比较。
流星：带有参数的渲染模板
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.