A preview of what's in store for titanium-backbone. (Ignore the numbers and underscores in the file names - they are intended only to provide order to the gists).

1_index.coffee

SampleWindow = require './window'

person = new Backbone.Model
  name: 'John Doe'

sampleWindow = new SampleWindow
  model: person

sampleWindow.render().open()

# Update the person's name after 3 seconds. This update will be reflected in the view
setTimeout ->
  person.set
    name: 'Jane Doe'
, 3000

2_window.coffee

styles = require './styles'
template = require './template'

class SampleWindow extends Backbone.View

  tagName: 'Window'

  styles: styles

  bindings:
    '.name': 'name'
    
  events:
    'click .cancel': 'cancel'
    'click .save': 'save'
    
  cancel: ->
    @el.close()
    
  save: ->
    @model.save().done =>
      @el.close()

  render: ->

    @$el.html template
      headingText: 'This is a sample'

    @
  
  open: -> @el.open()

3_template.jade

Label.heading= headingText

Label.name

.buttons.horizontal
  Button.save Save
  Button.cancel Cancel

4_styles.styl

Window

  backgroundColor #ccc

  .horizontal
    layout: horizontal

  .buttons
    top: 11

  Label

    color #333

    .heading
      font 14px bold

    .name
      font 12px