如何从 CometActor 更新 HTML 类答案

【问题标题】：How do I update an HTML class from a CometActor如何从 CometActor 更新 HTML 类
【发布时间】：2011-05-03 12:15:27
【问题描述】：

为了响应服务器上的一些异步事件，我想更新一个 HTML 节点的类以反映它的更新状态。我知道节点的 ID，以及我想将其更改为的类。我需要使用什么 JsCmd 来更新课程？一般来说，我在哪里可以找到关于 JsCmd 及其作用的好的参考资料？

一个简单的例子：

case class UpdateClass(id: String, htmlClass: String)

class ClassUpdater extends CometActor {
  override def lowPriority: scala.PartialFunction[scala.Any, scala.Unit] = {
    case UpdateClass(id, htmlClass) =>
      partialUpdate(Noop /* now what? */)
  }

  def render = NodeSeq.Empty
}

如果我有 HTML：

<html><body>
<lift:comet type="ClassUpdater"/>
<div id="foo" class="bar">insert text here</div>
</body></html>

如果我将消息UpdateClass("foo", "baz") 发送到我的ClassUpdater，我希望我的div 的类更改为baz。

【问题讨论】：

标签： scala scala-2.8 lift

【解决方案1】：

编辑： 我找到了更好的方法。旧代码现在更像是更复杂内容的蓝图。

看起来有一种不使用 jQuery 的更直接的方法：

SetElemById("foo", JE.Str("baz"), "className")

转换为 JavaScript 调用

document.getElementById("foo").className = "baz";

请注意，JE.Str("baz") 可以是任何 JsExp，如果您也可以这样做

SetElemById("foo", JE.Str("baz"), "firstChild", "className")

这将改变第一个孩子的班级。（见：SetElemById）

您可以查看JsCMD trait 的代码，了解内置命令还可以实现什么。

但是，如果您想要更复杂的东西，这样的事情可能会对您有所帮助。它发送一个 jQuery 命令，将 #oldId 中的类更改为 newClass。

  case class ChangeClassAtId(oldId: String, newClass: String) extends JsCmd {
    def toJsCmd = """try {
      $(""" + ("#" + oldId).encJs + """).attr("class", """ + newClass.encJs + """);
    } catch (e) {}"""
  }

在任何地方更改所有出现的类有点复杂：

case class ChangeClass(oldClass: String, newClass: String) extends JsCmd {
    def toJsCmd = """try {
      $(""" + ("." + oldClass).encJs + """).each(function(){
          $(this).addClass(""" + newClass.encJs + """).removeClass(""" + oldClass.encJs + """);
        });
    } catch (e) {}"""
  }

当然，您应该使用它而不是 Noop。

【讨论】：

【解决方案2】：

编辑 - 我误读了这个问题。我的回答只是更新了 div 的内容。

查看：http://github.com/lift/lift/blob/master/examples/example/src/main/scala/net/liftweb/example/comet/Clock.scala

你会想要这样的：

case UpdateClass(id, htmlClass) => partialUpdate(SetHtml(id, Text("TEXT TO SHOVE INTO DIV")))

【讨论】：

但这只会改变id的内容。