Editable Item List (Mithril + JSX)

by Abdelrahmein Zeid

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

Babel + JSX

/** @jsx m */

class Store {
  todos = m.prop([{task: "Item 1"}])
  editorText = m.prop("")
  itemBeingEdited = m.prop(1)
  textBeingEdited(){
    let x = this.todos()[this.itemBeingEdited()]
    return x ? x.task : ""
  }
  buttonText(){
    return this.itemBeingEdited() < this.todos().length ? 'Save' : 'Add'
  }
  editorIsEmpty(){
    return this.editorText() === ""
  }
  onAddItem(){
    if (this.itemBeingEdited() > this.todos().length){
      console.log("Adding")
      this.todos().push({task: this.editorText()})
      this.itemBeingEdited(this.itemBeingEdited() + 1)
      this.editorText("") 
    } else {
      console.log("Saving")
      console.log(this.editorText())
      console.log(this.todos()[this.itemBeingEdited()])
      this.todos()[this.itemBeingEdited()].task = this.editorText()
      this.editorText("")
      this.itemBeingEdited(this.todos().length + 1)
    }
  }
  onDeleteItem(i){
    if (this.itemBeingEdited() === i){
      this.editorText("")
      this.itemBeingEdited(this.todos().length + 1)
    }
    this.todos().splice(i, 1)
  }
  onEditItem(i) {
    console.log("Editing")
    this.itemBeingEdited(i)
    console.log(this.itemBeingEdited())
    console.log(this.textBeingEdited())
    this.editorText(this.textBeingEdited())
  }
}

const ListItem = {
  view(ctrl, props){
    console.log("Rendering ListItem")
    return(
      <li className='list-group-item clearfix constraint'>
        <span className='pull-left'>
          {props.todo.task}
        </span>
        <span className='pull-right'>
          <div className='btn-group'>
            <button className="btn btn-danger btn-xs delete" 
               onclick={props.deleteItem}>
              x
            </button>
            <button className="btn btn-success btn-xs edit" 
               onclick={props.editItem}>
              -
            </button>
          </div>
        </span>
      </li>
    )
   }
}


const ListGroup = {
  view(ctrl, {store}){
    console.log("Rendering...