basic event handling

src/compiler/codegen.js

@@ -3,11 +3,11 @@ import { parseText } from './text-parser'
 const bindRE = /^:|^v-bind:/
 const onRE = /^@|^v-on:/
 const mustUsePropsRE = /^(value|selected|checked|muted)$/
+const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/
 
 export function generate (ast) {
   const code = genElement(ast)
-  return new Function (`with (this) { return ${code}}`)
-}
+  return new Function (`with (this) { return ${code}}`)}
 
 function genElement (el, key) {
   let exp
@@ -53,27 +53,31 @@ function genData (el, key) {
   }
   let attrs = `attrs:{`
   let props = `props:{`
+  let events = `on:{`
   let hasAttrs = false
   let hasProps = false
+  let hasEvents = false
   for (let i = 0, l = el.attrs.length; i < l; i++) {
     let attr = el.attrs[i]
     let name = attr.name
+    let value = attr.value
     if (bindRE.test(name)) {
       name = name.replace(bindRE, '')
       if (name === 'class') {
         continue
       } else if (name === 'style') {
-        data += `style: ${ attr.value },`
+        data += `style: ${value},`
       } else if (mustUsePropsRE.test(name)) {
         hasProps = true
-        props += `"${ name }": (${ attr.value }),`
+        props += `"${name}": (${value}),`
       } else {
         hasAttrs = true
-        attrs += `"${ name }": (${ attr.value }),`
+        attrs += `"${name}": (${value}),`
       }
     } else if (onRE.test(name)) {
+      hasEvents = true
       name = name.replace(onRE, '')
-      // TODO
+      events += genEvent(name, value)
     } else if (name !== 'class') {
       hasAttrs = true
       attrs += `"${name}": (${JSON.stringify(attr.value)}),`
@@ -85,6 +89,9 @@ function genData (el, key) {
   if (hasProps) {
     data += props.slice(0, -1) + '},'
   }
+  if (hasEvents) {
+    data += events.slice(0, -1) + '},'
+  }
   return data.replace(/,$/, '') + '}'
 }
 
@@ -116,6 +123,17 @@ function genText (text) {
   }
 }
 
+function genEvent (name, value) {
+  // TODO support modifiers
+  if (!value) {
+    return `"${name}":function(){},`
+  } if (simplePathRE.test(value)) {
+    return `"${name}":${value},`
+  } else {
+    return `"${name}":function($event){${value}},`
+  }
+}
+
 function getAttr (el, attr) {
   let val
   if (val = el.attrsMap[attr]) {