examples/bodies.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../dist/nap.js"></script>
  <script type="text/javascript" src="../lib/d3/d3.js"></script>
  
  <script type="text/javascript">
    function init(){

      function todo(){
        var list = ["this", "that"]

        function view(req){
          d3.select(this)
            .selectAll("li")
            .data(list, function(d){return d})
            .enter().append("li")
            .text(function(d){return d})
        }

        function add(req){
          list.push(req.body)
        }

        return {
          view : view
        , add : add
        }
      }
      
      var myTodo = todo()

      web = nap.web()
        .view(d3.select("ul").node())
        .resource("/todos", 
          nap.negotiate.method(
            { get: nap.handlers.view(myTodo.view)
            , send: myTodo.add 
            }
          )
        )

      
      function render(){
        var req = web.req.bind(d3.select("ul").node())
        req("/todos")
      }

      render()

      d3.select("form")
        .on("submit", function(){
          d3.event.preventDefault()
          var input = this
          web.req(
            { uri : "/todos" 
            , method : "send"
            , body : input.todo.value 
            }
          , function(err, data){
              input.todo.value = ""
              render()
            }
          )
        })
    }
  </script>
  <title>Bodies</title>
</head>
<body onload="init()">
  <div class="container">

    <ul>
    </ul>

    <form>
      <input name="todo" type="text"></input>
    </form>
  </div>
</body>
</html>