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

Question

currently i'm having trouble with meteor sessions and how my code triggers it to render a template. 目前我遇到了meteor会话以及我的代码如何触发它来呈现模板。 Currently I have a session that sets its ._id to whatever is clicked. 目前我有一个会话，它将._id设置为点击的内容。

Template.sidebar.events({
/* on click of current sidecat class change to sidecat selected */
'click .sidecat': function (event) {
    Session.set("selected_project", this._id);
    }
});

And I have it add a css class if selected_player equals the div. 如果selected_player等于div，我会添加一个css类。

Template.sidebar.sidebarselected = function () {
   return Session.equals("selected_project", this._id) ? "sidebarselected" : '';
}

Now I render a template when there is sidebarselected and another class present. 现在我在sidebarselected和另一个类存在时渲染模板。 On click of the item it renders the template. 单击该项目时，它将呈现模板。

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

Everything up until now works great. 到目前为止，一切都很有效。 Now I have a Button that creates a new item in the list and makes it the selected item. 现在我有一个Button，它在列表中创建一个新项目并使其成为所选项目。 This is when the trouble occurs. 这是麻烦发生的时候。 When I create a new Item the list item is rendered and given the class sidebarselected but it does not render the template which should be called. 当我创建一个新项时，列表项被渲染并给出类sidebarselected，但它不呈现应该调用的模板。 It does render the template when I click an item. 单击某个项目时，它会渲染模板。 But not when using the button to create a new list item. 但不是在使用按钮创建新列表项时。 It becomes selected but does not render the template. 它被选中但不渲染模板。 Here is the code for that. 这是代码。

Template.sidebar.events({
/* add bar settings menu functions for clicks */
'click #newProject': function(event){ 
  var create = NewProject();
  Session.set("selected_project", create);
},

This is the NewProject Function 这是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;
}

Ok there is everything. 好吧有一切。 Item is created when I click on button, class is added but template is not rendered. 单击按钮时会创建项目，添加类但不呈现模板。 This is all of the javascript, if html is need let me know and I will provide it. 这是所有的JavaScript，如果html需要让我知道，我会提供它。

Let me add some details and html template stuff. 让我添加一些细节和html模板的东西。 But anyways what does work is 但无论如何，工作是什么

you can select a project in the list 您可以在列表中选择一个项目
when you select a project (by clicking on it), it's given a classname to indicate that it's selected 当您选择一个项目（通过点击它）时，它会给出一个类名来表示它已被选中
when you click "new project" you want to add an item to the list and immediately select it 当您单击“新项目”时，您想要将项目添加到列表中并立即选择它

That all works correctly. 一切正常。 The problem is when clicking the new project button. 问题是单击新项目按钮时。 It still selects the newly made project properly and gives it a class of selected. 它仍然正确地选择新制作的项目并给它一个选定的类。 What doesn't happen is if it finds that the selectedbar class also has a class of project with it. 如果它发现selectedbar类也有一个带有它的项目类，那么它不会发生什么。 It renders a separate template (projectpicked). 它呈现一个单独的模板（projectpicked）。 Projectpicked shows up when items are clicked. 单击项目时会显示Projectpicked。 Not when #newproject is clicked. 不是在点击#newproject时。 Even through it ends up selected it does not show projectpicked template. 即使通过它最终选择它也不会显示projectpicked模板。 Let me see if the code can do more of the talking. 让我看看代码是否可以做更多的谈话。

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

The reasoning behind the application logic and DOM structure combo is that I have other things besides projects like categories. 应用程序逻辑和DOM结构组合背后的原因是我除了类别之外还有其他项目。 I figured using session gets the id and then we figure out what class it is like project or category and display a different template based off of what class it is. 我认为使用session获取id然后我们找出它是什么类的项目或类别，并根据它是什么类显示不同的模板。 Don't know if its the best way but it's what I came up with. 不知道它是否是最好的方式，但这是我想出来的。 Open to suggestions. 接受建议。 If somethings not clear not me know and I'll try to explain it. 如果有些事情不清楚我不知道，我会试着解释一下。 Thanks for the help. 谢谢您的帮助。

Answer 1

I would rewrite the projectselected helper to not depend on a HTML classname to execute its logic, but to depend on a Session value. 我会重写projectselected帮助程序，不依赖于HTML类名来执行其逻辑，而是依赖于Session值。 You're using Session correctly in most of your code, but it seems weird to then couple your application logic to the DOM structure. 您在大多数代码中都正确使用了Session ，但是将应用程序逻辑与DOM结构相结合似乎很奇怪。

The way your code works at the moment (without seeing your HTML template - you should post that too!), it looks like you want it to do the following: 您的代码目前的工作方式（没有看到您的HTML模板 - 您也应该发布它！），看起来您希望它执行以下操作：

you can select a project in the list 您可以在列表中选择一个项目
when you select a project (by clicking on it), it's given a classname to indicate that it's selected 当您选择一个项目（通过点击它）时，它会给出一个类名来表示它已被选中
when you click "new project" you want to add an item to the list and immediately select it 当您单击“新项目”时，您想要将项目添加到列表中并立即选择它

Here's how I'd solve that scenario: 这是我如何解决这种情况：

Your template 你的模板

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

Your javascript 你的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);
}

The key here is to only set the selected_project Session value when you click on something. 这里的关键是仅在单击某些内容时设置selected_project会话值。 That happens twice; 这发生了两次; when you click an item to select it, and when you click the new project. 单击某个项目以选择它时，以及单击新项目时。

To get your template to draw the selected item, all you need to do in Meteor is describe when an item is selected: an item is selected when some session value matches its id. 要使模板绘制所选项目，您在Meteor中需要做的就是在选择项目时进行描述：当某个会话值与其ID匹配时，选择项目。 That's all. 就这样。

I haven't tested this code and it's obviously incomplete, but hopefully this points you in the right direction for refactoring your code a bit. 我没有测试过这段代码，但它显然是不完整的，但希望这可以指出你在重构代码方面的正确方向。

Answer 2

Well, after getting rather frustrated and rewriting most of the code over again I found the problem. 好吧，在相当沮丧并重写大部分代码后，我发现了问题。 In my projectpicked template instead of using Session.get and then using it to find the class. 在我的projectpicked模板中，而不是使用Session.get，然后使用它来查找类。 In stead I just have a 而不是我只有一个

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

While the original was: 原来是：

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

So I used some jquery instead of directly comparing variable find2 to a string. 所以我使用了一些jquery，而不是直接将变量find2与字符串进行比较。

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

问题描述

2 个解决方案

解决方案1
2 2013-02-27 01:46:50

解决方案2
0 已采纳 2013-03-01 17:20:46

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

问题描述

2 个解决方案

解决方案1 2 2013-02-27 01:46:50

解决方案2 0 已采纳 2013-03-01 17:20:46

解决方案1
2 2013-02-27 01:46:50

解决方案2
0 已采纳 2013-03-01 17:20:46