如何从 CometActor 更新 HTML 类

发布于 2024-09-30 07:21:02 字数 789 浏览 3 评论 0原文

为了响应服务器上的某些异步事件，我想更新 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。

原文

In response to some asynchronous event on the server, I want to update the class of an HTML node in order to reflect its updated status. I know the id of the node, and the class I want to change it to. What JsCmd do I need to use to update the class? In general, where can I find a good reference on the JsCmd's and what they do?

A simple example:

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
}

So if I had the HTML:

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

If I sent the message UpdateClass("foo", "baz") to my ClassUpdater, I want the class of my div to change to baz.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自此以后，行同陌路 2024-10-07 07:21:02

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

看起来有一种更直接的方法可以在没有 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 特性说明内置命令还可以做什么。

但是，如果您想要更复杂的东西，这样的东西可能会帮助您。它发送一个 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。

Edit: I’ve found a better way to do it. The old code is now more of a blueprint for more complicated stuff.

Looks like there is a more straightforward way of doing it without jQuery:

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

which translates to a JavaScript call

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

Note that JE.Str("baz") can be any JsExp and if you could also do something like

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

which would change the class of the first child. (See: SetElemById)

You can have a look at the code for the JsCMD trait for what else is possible with build-in commands.

In case you want to something more complicated, however, something like this might help you. It sends a jQuery command which will change the class in #oldId to newClass.

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

Changing all occurrences of a class everywhere is a bit more complicated:

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) {}"""
  }

You should use it instead of Noop of course.

回复收藏 0 原文