3

目前我遇到了流星会话以及我的代码如何触发它来呈现模板的问题。目前我有一个会话将其 ._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
}
};

到目前为止，一切都很好。现在我有一个按钮，它在列表中创建一个新项目并使其成为选定项目。这就是问题发生的时候。当我创建一个新项目时，会呈现列表项并给定类侧边栏，但它不会呈现应该调用的模板。当我单击一个项目时，它会呈现模板。但不是在使用按钮创建新列表项时。它被选中但不呈现模板。这是代码。

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。不是在单击#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，然后我们找出它像项目或类别的类，并根据它是什么类显示不同的模板。不知道这是否是最好的方法，但这是我想出的。接受建议。如果不清楚，我不知道，我会尽力解释。谢谢您的帮助。

4

2 回答 2

2

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

我还没有测试过这段代码，它显然是不完整的，但希望这能为你指明正确的方向来重构你的代码。

于 2013-02-27T01:46:50.047 回答
0

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

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

虽然原来是：

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

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

于 2013-03-01T17:20:46.770 回答