JQuery&流星类操作

JQuery & Meteor Class Manipulation

本文关键字：操作 流星 amp JQuery      更新时间：2024-04-24

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中标记文档"完成"。我还想将类切换为"completed"并更改样式。这是我的咖啡代码：

'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，你就必须用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来执行简单的类切换更简单，尽管这是从前端角度进行操作的传统方式。

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

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

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

不要使用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}}
相关文章：