React's markdown example with KDFramework

index.coffee

class Markdown extends JView
  
  constructor:->
    super cssClass : 'markdown',
          markdown : "Type some *markdown* here!"
  
    @textInput = new KDInputView
      bind         : "keyup"
      type         : "textarea"
      defaultValue : @data.markdown
      keyup        : @bound 'updateData'

  updateData:->
    @data.markdown = @textInput.getValue()
    @render()

  pistachio:->
    """
      <h3>Input</h3>
      {{> @textInput}}
      <h3>Output</h3>
      {{KD.utils.applyMarkdown(#(markdown))}}
    """

appView.addSubView new Markdown

style.css

.markdown {
  background-color : #eee;
  width            : auto;
  height           : auto;
  padding          : 10px;
  margin           : 20px;
  border           : 1px solid #ccc;
}

.markdown h3 {
  margin-bottom: 10px;
  margin-top: 10px;
}

.markdown textarea {
  width: 100%;
}