support filters in attribute bindings

Author: yyx990803

src/compiler.js

@@ -465,11 +465,11 @@ CompilerProto.checkPriorityDir = function (dirname, node, root) {
         root !== true &&
         (Ctor = this.resolveComponent(node, undefined, true))
     ) {
-        directive = Directive.parse(dirname, '', this, node)
+        directive = Directive.build(dirname, '', this, node)
         directive.Ctor = Ctor
     } else {
         expression = utils.attr(node, dirname)
-        directive = expression && Directive.parse(dirname, expression, this, node)
+        directive = expression && Directive.build(dirname, expression, this, node)
     }
     if (directive) {
         if (root === true) {
@@ -541,7 +541,7 @@ CompilerProto.compileElement = function (node, root) {
                 while (l--) {
                     exp = exps[l]
                     dirname = attr.name.slice(prefix.length)
-                    directive = Directive.parse(dirname, exp, this, node)
+                    directive = Directive.build(dirname, exp, this, node)
 
                     if (dirname === 'with') {
                         this.bindDirective(directive, this.parent)
@@ -554,7 +554,7 @@ CompilerProto.compileElement = function (node, root) {
                 // non directive attribute, check interpolation tags
                 exp = TextParser.parseAttr(attr.value)
                 if (exp) {
-                    directive = Directive.parse('attr', attr.name + ':' + exp, this, node)
+                    directive = Directive.build('attr', attr.name + ':' + exp, this, node)
                     if (params && params.indexOf(attr.name) > -1) {
                         // a param attribute... we should use the parent binding
                         // to avoid circular updates like size={{size}}
@@ -595,14 +595,14 @@ CompilerProto.compileTextNode = function (node) {
         if (token.key) { // a binding
             if (token.key.charAt(0) === '>') { // a partial
                 el = document.createComment('ref')
-                directive = Directive.parse('partial', token.key.slice(1), this, el)
+                directive = Directive.build('partial', token.key.slice(1), this, el)
             } else {
                 if (!token.html) { // text binding
                     el = document.createTextNode('')
-                    directive = Directive.parse('text', token.key, this, el)
+                    directive = Directive.build('text', token.key, this, el)
                 } else { // html binding
                     el = document.createComment(config.prefix + '-html')
-                    directive = Directive.parse('html', token.key, this, el)
+                    directive = Directive.build('html', token.key, this, el)
                 }
             }
         } else { // a plain string
@@ -827,15 +827,19 @@ CompilerProto.markComputed = function (binding, value) {
 /**
  *  Retrive an option from the compiler
  */
-CompilerProto.getOption = function (type, id) {
+CompilerProto.getOption = function (type, id, silent) {
     var opts = this.options,
         parent = this.parent,
-        globalAssets = config.globalAssets
-    return (opts[type] && opts[type][id]) || (
-        parent
-            ? parent.getOption(type, id)
-            : globalAssets[type] && globalAssets[type][id]
-    )
+        globalAssets = config.globalAssets,
+        res = (opts[type] && opts[type][id]) || (
+            parent
+                ? parent.getOption(type, id, silent)
+                : globalAssets[type] && globalAssets[type][id]
+        )
+    if (!res && !silent) {
+        utils.warn('Unknown ' + type.slice(0, -1) + ': ' + id)
+    }
+    return res
 }
 
 /**
@@ -882,7 +886,7 @@ CompilerProto.resolveComponent = function (node, data, test) {
         tagName = node.tagName,
         id      = this.eval(exp, data),
         tagId   = (tagName.indexOf('-') > 0 && tagName.toLowerCase()),
-        Ctor    = this.getOption('components', id || tagId)
+        Ctor    = this.getOption('components', id || tagId, true)
 
     if (id && !Ctor) {
         utils.warn('Unknown component: ' + id)

src/directive.js

@@ -15,7 +15,8 @@ var utils      = require('./utils'),
     FILTERS_RE      = /\|[^\|]+/g,
     FILTER_TOKEN_RE = /[^\s']+|'[^']+'|[^\s"]+|"[^"]+"/g,
     NESTING_RE      = /^\$(parent|root)\./,
-    SINGLE_VAR_RE   = /^[\w\.$]+$/
+    SINGLE_VAR_RE   = /^[\w\.$]+$/,
+    QUOTE_RE        = /"/g
 
 /**
  *  Directive class
@@ -57,28 +58,35 @@ function Directive (dirname, definition, expression, rawKey, compiler, node) {
             : expression
     ).trim()
 
-    parseKey(this, rawKey)
+    var parsed = Directive.parseArg(rawKey)
+    this.key = parsed.key
+    this.arg = parsed.arg
 
-    var filterExps = this.expression.slice(rawKey.length).match(FILTERS_RE)
-    if (filterExps) {
+    var filters = Directive.parseFilters(this.expression.slice(rawKey.length)),
+        filter, fn, i, l
+    if (filters) {
         this.filters = []
-        for (var i = 0, l = filterExps.length, filter; i < l; i++) {
-            filter = parseFilter(filterExps[i], this.compiler)
-            if (filter) {
+        for (i = 0, l = filters.length; i < l; i++) {
+            filter = filters[i]
+            fn = this.compiler.getOption('filters', filter.name)
+            if (fn) {
+                filter.apply = fn
                 this.filters.push(filter)
-                if (filter.apply.computed) {
-                    // some special filters, e.g. filterBy & orderBy,
-                    // can involve VM properties and they often need to
-                    // be computed.
+                if (fn.computed) {
                     this.computeFilters = true
                 }
             }
         }
-        if (!this.filters.length) this.filters = null
-    } else {
+    }
+
+    if (!this.filters || !this.filters.length) {
         this.filters = null
     }
 
+    if (this.computeFilters) {
+        this.key = Directive.inlineFilters(this.key, this.filters)
+    }
+
     this.isExp =
         this.computeFilters ||
         !SINGLE_VAR_RE.test(this.key) ||
@@ -88,47 +96,6 @@ function Directive (dirname, definition, expression, rawKey, compiler, node) {
 
 var DirProto = Directive.prototype
 
-/**
- *  parse a key, extract argument and nesting/root info
- */
-function parseKey (dir, rawKey) {
-    var key = rawKey
-    if (rawKey.indexOf(':') > -1) {
-        var argMatch = rawKey.match(ARG_RE)
-        key = argMatch
-            ? argMatch[2].trim()
-            : key
-        dir.arg = argMatch
-            ? argMatch[1].trim()
-            : null
-    }
-    dir.key = key
-}
-
-/**
- *  parse a filter expression
- */
-function parseFilter (filter, compiler) {
-
-    var tokens = filter.slice(1).match(FILTER_TOKEN_RE)
-    if (!tokens) return
-
-    var name = tokens[0],
-        apply = compiler.getOption('filters', name)
-    if (!apply) {
-        utils.warn('Unknown filter: ' + name)
-        return
-    }
-
-    return {
-        name  : name,
-        apply : apply,
-        args  : tokens.length > 1
-                ? tokens.slice(1)
-                : null
-    }
-}
-
 /**
  *  called when a new value is set 
  *  for computed properties, this will only be called once
@@ -170,7 +137,7 @@ DirProto.unbind = function () {
     this.vm = this.el = this.binding = this.compiler = null
 }
 
-// exposed methods ------------------------------------------------------------
+// Exposed static methods -----------------------------------------------------
 
 /**
  *  split a unquoted-comma separated expression into
@@ -183,27 +150,104 @@ Directive.split = function (exp) {
 }
 
 /**
- *  make sure the directive and expression is valid
- *  before we create an instance
+ *  parse a key, extract argument
  */
-Directive.parse = function (dirname, expression, compiler, node) {
+Directive.parseArg = function (rawKey) {
+    var key = rawKey,
+        arg = null
+    if (rawKey.indexOf(':') > -1) {
+        var argMatch = rawKey.match(ARG_RE)
+        key = argMatch
+            ? argMatch[2].trim()
+            : key
+        arg = argMatch
+            ? argMatch[1].trim()
+            : arg
+    }
+    return {
+        key: key,
+        arg: arg
+    }
+}
 
-    var dir = compiler.getOption('directives', dirname) || directives[dirname]
-    if (!dir) {
-        utils.warn('Unknown directive: ' + dirname)
-        return
+/**
+ *  parse a the filters
+ */
+Directive.parseFilters = function (exp) {
+    if (!exp.indexOf('|') < 0) return
+    var filters = exp.match(FILTERS_RE),
+        res, i, l, tokens
+    if (filters) {
+        res = []
+        for (i = 0, l = filters.length; i < l; i++) {
+            tokens = filters[i].slice(1).match(FILTER_TOKEN_RE)
+            if (tokens) {
+                res.push({
+                    name: tokens[0],
+                    args: tokens.length > 1
+                        ? tokens.slice(1)
+                        : null
+                })
+            }
+        }
+    }
+    return res
+}
+
+/**
+ *  Inline computed filters so they become part
+ *  of the expression
+ */
+Directive.inlineFilters = function (key, filters) {
+    var args, filter
+    for (var i = 0, l = filters.length; i < l; i++) {
+        filter = filters[i]
+        args = filter.args
+            ? ',"' + filter.args.map(escapeQuote).join('","') + '"'
+            : ''
+        key = 'this.$compiler.getOption("filters", "' +
+                filter.name +
+            '").call(this,' +
+                key + args +
+            ')'
     }
+    return key
+}
+
+/**
+ *  Convert double quotes to single quotes
+ *  so they don't mess up the generated function body
+ */
+function escapeQuote (v) {
+    return v.indexOf('"') > -1
+        ? v.replace(QUOTE_RE, '\'')
+        : v
+}
 
-    var rawKey
+/**
+ *  Parse the key from a directive raw expression
+ */
+Directive.parseKey = function (expression) {
     if (expression.indexOf('|') > -1) {
         var keyMatch = expression.match(KEY_RE)
         if (keyMatch) {
-            rawKey = keyMatch[0].trim()
+            return keyMatch[0].trim()
         }
     } else {
-        rawKey = expression.trim()
+        return expression.trim()
     }
-    
+}
+
+/**
+ *  make sure the directive and expression is valid
+ *  before we create an instance
+ */
+Directive.build = function (dirname, expression, compiler, node) {
+
+    var dir = compiler.getOption('directives', dirname)
+    if (!dir) return
+
+    var rawKey = Directive.parseKey(expression)
     // have a valid raw key, or be an empty directive
     if (rawKey || expression === '') {
         return new Directive(dirname, dir, expression, rawKey, compiler, node)

src/directives/partial.js

@@ -19,8 +19,6 @@ module.exports = {
         if (!partial) {
             if (id === 'yield') {
                 utils.warn('{{>yield}} syntax has been deprecated. Use <content> tag instead.')
-            } else {
-                utils.warn('Unknown partial: ' + id)
             }
             return
         }

src/exp-parser.js

@@ -3,8 +3,7 @@ var utils           = require('./utils'),
     STR_RESTORE_RE  = /"(\d+)"/g,
     NEWLINE_RE      = /\n/g,
     CTOR_RE         = new RegExp('constructor'.split('').join('[\'"+, ]*')),
-    UNICODE_RE      = /\\u\d\d\d\d/,
-    QUOTE_RE        = /"/g
+    UNICODE_RE      = /\\u\d\d\d\d/
 
 // Variable extraction scooped from https://github.com/RubyLouvre/avalon
 
@@ -110,22 +109,12 @@ function escapeDollar (v) {
         : v
 }
 
-/**
- *  Convert double quotes to single quotes
- *  so they don't mess up the generated function body
- */
-function escapeQuote (v) {
-    return v.indexOf('"') > -1
-        ? v.replace(QUOTE_RE, '\'')
-        : v
-}
-
 /**
  *  Parse and return an anonymous computed property getter function
  *  from an arbitrary expression, together with a list of paths to be
  *  created as bindings.
  */
-exports.parse = function (exp, compiler, data, filters) {
+exports.parse = function (exp, compiler, data) {
     // unicode and 'constructor' are not allowed for XSS security.
     if (UNICODE_RE.test(exp) || CTOR_RE.test(exp)) {
         utils.warn('Unsafe expression: ' + exp)
@@ -154,23 +143,6 @@ exports.parse = function (exp, compiler, data, filters) {
             .replace(pathRE, replacePath)
             .replace(STR_RESTORE_RE, restoreStrings)
 
-    // wrap expression with computed filters
-    if (filters) {
-        var args, filter
-        for (var i = 0, l = filters.length; i < l; i++) {
-            filter = filters[i]
-            args = filter.args
-                ? ',"' + filter.args.map(escapeQuote).join('","') + '"'
-                : ''
-            body =
-                'this.$compiler.getOption("filters", "' +
-                    filter.name +
-                '").call(this,' +
-                    body + args +
-                ')'
-        }
-    }
-
     body = accessors + 'return ' + body
 
     function saveStrings (str) {