javascript - JQuery 和 Meteor 类操作

Question

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

这是 HTML:

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

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

'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 重新渲染正在进行，这可能会导致我出现问题。

Answer 1

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

要解决您的问题，请开始在模板 HTML 中添加一个“完整的”助手:

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

这个模板定义很简单，你只需根据底层数据上下文的值返回适当的类，它实际上是模型(注意:我们使用相同的名称 - 重载，有点 - 默认的完整助手仅返回数据上下文的值)。

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 中的两个主要响应式数据源是集合和 session 变量。当您使用 jQuery 从 Meteor 模板系统修改 DOM 时，不幸的是，当前的 Meteor 渲染引擎每次重新渲染时都会清除您的修改，因此最好的解决方案是使用助手，因为 Meteor 引擎显然知道它们。

你对 Meteor UI 解决你的问题是正确的，因为新引擎会更智能并且不会清除你的 DOM 类属性，但我认为这种方法比必须依赖 jQuery 来执行一个简单的类更简单切换，虽然这是从前端 Angular 做事的传统方式。