Как обновить класс HTML из CometActor - PullRequest
Новая
       42

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

3 голосов
/ 01 ноября 2010

В ответ на какое-то асинхронное событие на сервере я хочу обновить класс узла 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.

Ответы [ 2 ]

4 голосов
/ 01 ноября 2010

Редактировать: Я нашел лучший способ сделать это.Старый код теперь больше похож на план для более сложных вещей.

Похоже, есть более простой способ сделать это без 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 конечно.

0 голосов
/ 01 ноября 2010

РЕДАКТИРОВАТЬ - Я неправильно понял вопрос. Мой ответ просто обновляет содержимое div.

Выезд: http://github.com/lift/lift/blob/master/examples/example/src/main/scala/net/liftweb/example/comet/Clock.scala

Вы хотите что-то вроде этого:

case UpdateClass (id, htmlClass) => partUpdate (SetHtml (id, Text («ТЕКСТ, КОТОРЫЙ ПОКАЗАТЬ В DIV»)))

...