From 8f5a69be8a73ccaa426841f9914d0044aeb693a0 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 11 Apr 2016 04:37:32 -0400 Subject: [PATCH] rough v-model --- src/compiler/codegen.js | 47 ++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/src/compiler/codegen.js b/src/compiler/codegen.js index 07c8bc69b..abc876454 100644 --- a/src/compiler/codegen.js +++ b/src/compiler/codegen.js @@ -1,7 +1,9 @@ import { parseText } from './text-parser' +import { isArray } from '../util/index' const bindRE = /^:|^v-bind:/ const onRE = /^@|^v-on:/ +const dirRE = /^v-/ const mustUsePropsRE = /^(value|selected|checked|muted)$/ const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/ @@ -53,7 +55,7 @@ function genData (el, key) { } let attrs = `attrs:{` let props = `props:{` - let events = `on:{` + let events = {} let hasAttrs = false let hasProps = false let hasEvents = false @@ -77,7 +79,14 @@ function genData (el, key) { } else if (onRE.test(name)) { hasEvents = true name = name.replace(onRE, '') - events += genEvent(name, value) + addHandler(events, name, value) + } else if (name === 'v-model') { + // TODO: handle other input types + hasProps = hasEvents = true + props += `value:${value},` + addHandler(events, 'input', `${value}=$event.target.value`) + } else if (dirRE.test(name)) { + // TODO: normal directives } else if (name !== 'class') { hasAttrs = true attrs += `"${name}": (${JSON.stringify(attr.value)}),` @@ -90,8 +99,9 @@ function genData (el, key) { data += props.slice(0, -1) + '},' } if (hasEvents) { - data += events.slice(0, -1) + '},' + data += genEvents(events) } + console.log(data) return data.replace(/,$/, '') + '}' } @@ -123,14 +133,35 @@ function genText (text) { } } -function genEvent (name, value) { +function addHandler (events, name, value) { + const handlers = events[name] + if (isArray(handlers)) { + handlers.push(value) + } else if (handlers) { + events[name] = [handlers, value] + } else { + events[name] = value + } +} + +function genEvents (events) { + let res = 'on:{' + for (var name in events) { + res += `"${name}":${genHandler(events[name])},` + } + return res.slice(0, -1) + '}' +} + +function genHandler (value) { // TODO support modifiers if (!value) { - return `"${name}":function(){},` - } if (simplePathRE.test(value)) { - return `"${name}":${value},` + return `function(){}` + } else if (isArray(value)) { + return `[${value.map(genHandler).join(',')}]` + } else if (simplePathRE.test(value)) { + return value } else { - return `"${name}":function($event){${value}},` + return `function($event){${value}}` } }