Question

目前我遇到了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然后我们找出它是什么类的项目或类别，并根据它是什么类显示不同的模板。不知道它是否是最好的方式，但这是我想出来的。接受建议。如果有些事情不清楚我不知道，我会试着解释一下。谢谢你的帮助。

Answer 1

我会重写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匹配时，会选择项目。就是这样。

我还没有对这段代码进行过测试，但这显然是不完整的，但希望这能为您指出重构代码的正确方向。

Answer 2

好吧，在经历了相当沮丧并重新编写大部分代码后，我发现了问题。在我的projectpicked模板中，而不是使用Session.get，然后使用它来查找类。而不是我只有一个

if ($('.sidecat.project').hasClass('sidebarselected')) {
return true
}

原作是：

if (find2 == 'project sidebarselected')
{
return  true
}

所以我使用了一些jquery，而不是直接将变量find2与字符串进行比较。

试图触发模板渲染的流星会话

2 个答案: