index.coffe

require('lib/setup')

Spine = require('spine')

GeneralModal   = require("modals/generalModal")

class App extends Spine.Controller
  @extend Spine.Controller.ModalController
  
  #
  # se esta haciendo el evento a click de btn1
  #

  events:
    "click .btn1" : "suma"

  constructor: ->
    super    
    @setupModal()
    @html require("views/layout")  
  
  #
  # el evento no va tener form
  # ver la documentacion de Jquery con respecto click
  # devuelve function(event){}

  # para que eso funcion tiene que revisar la documentacion del ejemplo de spine
  # el evento es submit form : suma

  # para que eso funcion con el evento click en btn
  # suma: (e) => 
  #  console.log $(".input1").val()
  #  console.log $(".input2").val()
  #  $(".lbl_result").html "Aqui va el resultado"

  suma = (form) ->
    a = eval_(form.a.value)
    b = eval_(form.b.value)
    c = a + b
    form.ans.value = c
  
module.exports = App

layout.eco

<--  .btn1 ni existe y form no tiene clase para poder llamarlo con un evento submit -->
<--  veloa en mayuscula -->

<div class="hero-unit">
   <form name="formx" CLASS="FORM1">
    <input CLASS="INPUT1" type=text size=4 value=12 name="a"/> 
    <input  CLASS="INPUT2"  type="number" size=4 value=3 name="b"> 
   = <input type "number" value=0 name="ans" size=9>    

    <input CLASS="BTN1" type="button" value=" + " onClick="suma(this.form)"> 
    <input type="button" value=" - " onClick="resta(this.form)"> 
    <input type="button" value=" x " onClick="multiplica(this.form)"> 
    <input type="button" value=" / " onClick="divide(this.form)">
    
  </form>
</div>