Javascript JQuery&；流星级操纵

我有一个Meteor使用{{{each}}块显示的文档列表（TODO）。每个todo列表项都使用它的文档ID作为HTML元素ID。我试图使用JQuery在单击时修改类结构

以下是HTML：

<div class="todos">
    {{#each todos}}
        <li id={{_id}} class="todo">{{description}} ({{complete}})</li>
    {{/each}}
</div>

---

我已经验证了我得到的是正确的JQuery对象，但由于某些原因，我无法操作该类。我还尝试使用addClass，但运气不佳。我想知道是否有一些流星重新渲染正在进行，这可能会给我带来问题。

我做了一些研究，从流星渲染的角度来看，{{{常数}}区域似乎是迄今为止最好的答案。它工作正常，但仍有问题。这样做的好处是对DOM进行样式更改是可行的，但缺点是元素中的数据不再是被动的（即使更改发生在数据库中）。希望新的Meteor UI工作能够解决这个问题

下面是允许我的DOM样式生效的代码：

    <div class="todos">
        {{#each todos}}
            {{#constant}}
                <li id={{_id}} class="todo">{{description}}</li>
            {{/constant}}
        {{/each}}
    </div>

{{{每个待办事项}
{{{#常数}}
{{{description}
{{/常数}
{{/每个}}

我做了一些研究，考虑到流星的渲染效果，{{{常数}}区域似乎是迄今为止最好的答案。它工作正常，但仍有问题。这样做的好处是对DOM进行样式更改是可行的，但缺点是元素中的数据不再是被动的（即使更改发生在数据库中）。希望新的Meteor UI工作能够解决这个问题

下面是允许我的DOM样式生效的代码：

    <div class="todos">
        {{#each todos}}
            {{#constant}}
                <li id={{_id}} class="todo">{{description}}</li>
            {{/constant}}
        {{/each}}
    </div>

{{{每个待办事项}
{{{#常数}}
{{{description}
{{/常数}
{{/每个}}

不要使用jQuery进行简单的类操作-直接从模板执行：

<template name="todos">
  {{#each todos}}
    {{>todo}}
  {{/each}}
</template>

<template name="todo">
  <li id="{{_id}}" class="todo {{status}}">{{description}} ({{complete}})</li>
</template>

---

不要将jQuery用于简单的类操作-直接从模板执行：

<template name="todos">
  {{#each todos}}
    {{>todo}}
  {{/each}}
</template>

<template name="todo">
  <li id="{{_id}}" class="todo {{status}}">{{description}} ({{complete}})</li>
</template>

---

一旦你开始使用Meteor，你必须用Meteor的方式做某些事情

要解决您的问题，请开始在HTML模板中添加“完整”帮助程序：

<div class="todos">
    {{#each todos}}
        <li id={{_id}} class="todo {{complete}}">{{description}} ({{complete}})</li>
    {{/each}}
</div>

然后在事件部分，只需更新模型：

"click .todo":function(event,template){
    var complete=template.data.complete;
    Todos.update(template.data._id,{$set:{complete:!complete}});
}

这应该像预期的那样起作用

除了定义自己的反应性上下文外，Meteor中的两个主要反应性数据源是集合和会话变量。 当您使用jQuery从Meteor模板系统中修改DOM时，当前的Meteor渲染引擎不幸地会在每次重新渲染时删除您的修改，因此最好的解决方案是使用帮助程序，因为Meteor引擎显然知道它们

---

关于Meteor UI解决您的问题，您是对的，因为新引擎将更加智能，不会清除您的DOM类属性，但我认为这种方法甚至比依赖jQuery执行简单的类切换更简单，虽然这是从前端角度做事情的传统方式。

一旦你开始使用Meteor，你就必须用Meteor的方式做某些事情

要解决您的问题，请开始在HTML模板中添加“完整”帮助程序：

<div class="todos">
    {{#each todos}}
        <li id={{_id}} class="todo {{complete}}">{{description}} ({{complete}})</li>
    {{/each}}
</div>

然后在事件部分，只需更新模型：

"click .todo":function(event,template){
    var complete=template.data.complete;
    Todos.update(template.data._id,{$set:{complete:!complete}});
}

这应该像预期的那样起作用

除了定义自己的反应性上下文外，Meteor中的两个主要反应性数据源是集合和会话变量。 当您使用jQuery从Meteor模板系统中修改DOM时，当前的Meteor渲染引擎不幸地会在每次重新渲染时删除您的修改，因此最好的解决方案是使用帮助程序，因为Meteor引擎显然知道它们

关于Meteor UI解决您的问题，您是对的，因为新引擎将更加智能，并且不会清除您的DOM类属性，但我认为这种方法甚至比必须依赖jQuery来执行简单的类切换更简单，尽管这是从前端角度做事情的传统方式