Блог

Главная - Вопросы по программированию - Как мне обновить HTML-класс из CometActor

Как мне обновить HTML-класс из CometActor

#scala #scala-2.8 #lift

#scala #scala-2.8 #поднять

Вопрос:

В ответ на некоторое асинхронное событие на сервере я хочу обновить класс HTML-узла, чтобы отразить его обновленный статус. Я знаю идентификатор узла и класс, на который я хочу его изменить. Какой 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 .

Ответ №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, чтобы узнать, что еще возможно с помощью встроенных команд.

Однако, если вы хотите что-то более сложное, вам может помочь что-то вроде этого. Он отправляет команду 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(«ТЕКСТ, КОТОРЫЙ НУЖНО ВСТАВИТЬ В DIV»)))

Комментарии:

1. Но это изменяет только содержимое id .