Meteor会话尝试触发模板渲染

Question

Meteor会话尝试触发模板渲染

3

目前我在处理Meteor会话和代码触发渲染模板的问题。我现在有一个session，它将其._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" : '';
}

现在，当侧边栏被选中并且存在另一个类时，我会渲染模板。点击该项后，它会呈现模板。

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
}
};

到目前为止，一切都很好。现在我有一个按钮，可以在列表中创建一个新项目并使其成为选定项目。这时候问题出现了。当我创建一个新项时，列表项被渲染并赋予了类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模板内容。但无论如何，下面的工作都可以正常运行：

您可以在列表中选择一个项目
当您选择一个项目（通过单击它）时，它会被赋予一个类名以指示它已被选中
当您单击“新建项目”时，您希望将一个项目添加到列表中并立即选择它

所有这些都可以正常工作。问题在于单击“新建项目”按钮时。它仍然正确地选择新建的项目并给它一个selected的类。但它没有发现selectedbar类也有一个与之相关的project类。它不会渲染一个单独的模板（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结构的组合背后的原因是我除了项目之外还有其他事情，比如类别。我想使用会话获取id，然后我们确定它是哪个类别，比如项目或类别，并根据类别显示不同的模板。不知道这是否是最好的方法，但这是我想出来的。欢迎提出建议。如果有什么不清楚的地方，请让我知道，我会尽力解释。谢谢帮助。

- asiammyself

2个回答

0

好的，在遇到一些挫折并重新编写了大部分代码之后，我找到了问题所在。在我的projectpicked模板中，我没有使用Session.get然后使用它来查找类，而是直接结束了。

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

原始内容为：

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

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

- asiammyself

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul · Accepted Answer

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

我尚未测试此代码，而且显然不完整，但希望这可以为您重构代码指明正确的方向。