xitrum-framework / xitrum-ko

Knockout.js plugin for Xitrum

Website GitHub

This is a plugin for Xitrum that provides some convenient helpers to work with Knockout.js.

Config your Xitrum project to use this plugin

Edit your Xitrum project's build.sbt:

libraryDependencies += "tv.cntt" %% "xitrum-ko" % "1.7"

Usage

See Knockout.js demo in the project xitrum-demos.

Assume that you are using Scalate template engine.

Include Knockout's JS files (knockout.js and knockout.mapping.js) to your template:

import xitrum.Knockout

!= Knockout.js

In the template, call helpers that you want to use:

Knockout.applyBindingsCs(RVTodoList.get, classOf[TodosSave], """
  $('#new_todo_form').submit ->
    if $('#new_todo_form').valid()
      desc = $('#new_todo_desc').val()
      $('#new_todo_desc').val('')
      todo = {done: false, desc: desc}
      model.todos.push(ko.mapping.fromJS(todo))
    false

  $('#save').click(sync)
""")

Cs in applyBindingsCs means that you will give the helper a CoffeeScript snippet. If you want to use JS, use applyBindingsJs.

Helpers:

  • applyBindingsCs(model: AnyRef, syncActionClass: Class[_ <: Action], cs: String)
  • applyBindingsCs(model: AnyRef, scopeSelector: String, syncActionClass: Class[_ <: Action], cs: String)
  • applyBindingsJs(model: AnyRef, syncActionClass: Class[_ <: Action], js: String)
  • applyBindingsJs(model: AnyRef, scopeSelector: String, syncActionClass: Class[_ <: Action], js: String)