Untitled

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_top" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="demo">
    <h2>Add Stuff: <text></text></h2>
    <div class="former">
      <div id="form">
        <form>
          <input name="text">
          <input type="submit">
        </form>
      </div>
    </div>
    <div class="mylist">
      <div id="list">
        <ol>
          <li>
            <text></text>
          </li>
        </ol>
      </div>
    </div>
  </div>



  <script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

  <script src="//rawgit.com/magnumjs/mag.js/master/src/old/mag.comps.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/old/mag.addons.js"></script>

  <script src="app.js"></script>
  <script src="model.js"></script>
  <script src="form.js"></script>
  <script src="list.js"></script>


  <script>
    // default props
    var props = {
      modelService: model,
      form: app.form,
      list: app.list
    }

     // initialize the application
    mag.module("demo", app, props)
  </script>

</body>

</html>

/* MagJS - Form composing example */

// parent module
var app = {}

app.controller = function(props) {

  this.activeRecord = new props.modelService()

  this.handleFormSubmit = function(record) {
    model.save(record)
    this.activeRecord = record
  }.bind(this)
  
}

app.view = function(s, p) {

  s.text = s.activeRecord.text

  s.former = mag.module('form', p.form(), {
    // copy record so state won't update the inner component on every change
    activeRecord: mag.addons.copy(s.activeRecord),
    onFormSubmit: s.handleFormSubmit
  })

  s.mylist = mag.module('list', p.list(), {
    list: p.modelService.getAll()
  })

}

li:empty, .hide {
  display: none;
}
a { display: block;}
a:after {content:" \bb";}
.success {
  background-color: #2ecc40;
  color: white;
  border: solid 1 silver
}
.error {
  background-color: #ff4136;
  color: white;
  border: solid 1 silver
}

##MagJS - Elegant DOM bindings

<hr>

Example of composing with components

This is a simple add things model data service

We use the model data service along with our parent module
to aggregate responsibility for all data related actions

##Components

We have a form component that uses the passfail component for form field validation

We have a list child module to lists our data
There is an editable event to the data on each list's link
Which then loads that particular item into the form for live editing

var model = function(data) {
  data = data || {}
  this.text = mag.prop(data.text || '')
  this.id = mag.prop(data.id || '')
}

model.save=function(record){
  this.data.push(record)
}

model.getAll = function(){
  return this.data = this.data || []
}

app.form = function(){
  
  return {
    view:function(s,p){
      
      s.text = {
        _oninput : function(){
          p.activeRecord.text(this.value)
        }
      }
      
      s.form = {
        _onsubmit : function(e){
          e.preventDefault()
          p.onFormSubmit(p.activeRecord)
        }
      }
      
    }
  }
  
}

app.list = function(){
  
  return {
    view:function(s,p){
      
      s.li = p.list
      
    }
  }
  
}