JQuery & Meteor 类操作答案

【问题标题】：JQuery & Meteor Class ManipulationJQuery & Meteor 类操作
【发布时间】：2014-01-04 04:14:28
【问题描述】：

我有一个 Meteor 使用 {{#each}} 块显示的文档列表（待办事项）。每个待办事项列表项都使用它的文档 ID 作为 HTML 元素 ID。我正在尝试使用 JQuery 来修改点击时的类结构。

这是 HTML：

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

当用户单击该项目时，我会触发一个 Template.Event 以在 Mongo 中将文档标记为“完成”。我还想将课程切换为“已完成”并更改样式。这是我的咖啡代码：

'click .todo': () ->
    self = this
    if Todos.findOne({_id: this._id}).complete is false
        Todos.update({_id: this._id}, { $set: {complete: true}})
    else
        Todos.update({_id: this._id}, { $set: {complete: false}})
    $("##{this._id}").toggleClass("completed")

我已经确认我得到了正确的 JQuery 对象，但由于某种原因我无法操作该类。我也尝试使用 addClass 没有运气。我想知道是否有一些 Meteor 重新渲染可能会导致我出现问题。

【问题讨论】：

标签： javascript jquery meteor

【解决方案1】：

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

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

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

此模板定义很简单，您只需根据实际是模型的底层数据上下文的值返回适当的类（注意：我们使用相同的名称 - 重载，排序 - 默认的完整帮助器只是返回数据上下文的 VALUE）。

Template.todos.complete=function(){
    return this.complete?"completed":"";
}

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

"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 执行简单类更简单切换，尽管从前端的角度来看这是传统的做事方式。

【讨论】：

【解决方案2】：

我做了一些研究，看起来 {{#constant}} 区域是迄今为止最好的答案，因为 Meteor 是如何渲染的。它工作正常，但仍然存在问题。好处是样式更改对 DOM 起作用，但缺点是元素内的数据不再是反应性的（即使更改确实发生在数据库中）。希望新的 Meteor UI 工作能够解决这个问题。

这是使我的 DOM 样式生效的代码：

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

【讨论】：

【解决方案3】：

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

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

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

然后在你的咖啡脚本中：

Template.todo.status = -> if @complete then "complete" else "incomplete"

Template.todo.events
  'click .todo': ->
    Todos.update {_id: @_id}, {$set: {complete: !@complete}}

【讨论】：