reactive-web: Lift をシンプルに

構成

DOM 変更のカスタムレンダリング

デフォルトでは、reactive は標準 DOM API を使ってブラウザを更新しますが、必要なら代わりのメカニズム (jQuery のエフェクトを使うものなど) を定義することができます。

DOM 変更には 5 つあり、これらは case クラスとして定義されています。

  case class InsertChildBefore(parentId: String, child: Elem, beforeId: String) extends DomMutation
  case class AppendChild(parentId: String, child: Elem) extends DomMutation
  case class RemoveChild(parentId: String, oldId: String) extends DomMutation
  case class ReplaceChild(parentId: String, child: Elem, oldId: String) extends DomMutation
  case class ReplaceAll(parentId: String, child: NodeSeq) extends DomMutation
  case class UpdateProperty[T](parentId: String, propertyName: String, attributeName: String, value: T)(implicit val codec: PropertyCodec[T]) extends DomMutation
  

カスタムレンダリングを定義するには、次のようなコードを記述する必要があります。

  implicit val config = Config(
    domMutationRenderer = CanRender {
      case InsertChildBefore(parentId, child, prevId) => ...
      case AppendChild(parentId, child) => ...
      case RemoveChild(parentId, oldId) => ...
      case ReplaceChild(parentId, child, oldId) => ...
      case ReplaceAll(parentId, child) => ...
      case up@UpdateProperty(parentId, pname, aname, v) => ...
    }
  )
  

DomMutation=>String を指定して CanRender ファクトリを呼び出すことで、CanRender[DomMutation] を定義しています。これを置く場所として最も適切なのは、作成するパッケージオブジェクトの中です。こうすれば、作成するすべてのクラスの暗黙のスコープに含まれ、import を使う必要がありません。