Mini MVVM Framework Avalonjs Learning Tutorial 16, Filter

Avalon's filters are reference from angular to rivets. It is also called a pipeline text filter, its processing object can only be text (string), it can only be used in text binding, and can only be the form of double curly braces. Here are the filter comparisons for everyone:

Rivetsjs<span rv-text= "Event.startdate | Date "></span><input rv-value=" Item.price | Currency "><span rv-text=" Billing.cardnumber | Mask 4 4 ******** "></span>angularjs<b>{{" lower cap string "| uppercase}}</b><span>{{{foo:" Bar ", baz:23} | JSON}}</span>{{1304375948024 | date}}{{1304375948024 | date: "MM/DD/YYYY @ h:mma"}}{{expression | filter1 | fil Ter2 | ... }} avalon.js{{aaa | uppercase}}{{12345| number}}<div>{{Prop | filter1 | filter2 | filter3 (args, args2) | filter4 (args )}}</div> generated in {{1373021259229 | date ("yyyy MM DD:HH:MM:SS")}}

Avalon's arguments are implemented by parentheses, and multiple parameters are separated by commas, which is similar to JS's method invocation and seeks to reduce the cost of learning.

Avalon comes with several filters:

Html

no arguments are used to convert text bindings to HTML bindings

Uppercase

Capitalization of

lowercase

lowercase

Truncate

truncate long string, truncate (number, truncation), number defaults to 30,truncation for "..."

Camelize

Hump Processing

Escape

to escape HTML-like strings, convert angle brackets to > <

Currency

Add a currency symbol to a number, and a thousand character, currency (symbol)

Number

various formats of numbers, which are fully compatible with PHP's Number_format, have three parameters. Decimals optional, specify how many decimal digits. Dec_point Optional, which specifies the string to use as the decimal point (the default is . ). Thousands_sep Optional, which specifies the string to use as the thousand separator (default , ), and all other parameters are required if the parameter is set.

Date

formatting dates, date (formats)

  ' yyyy ': 4 digit representation of year (e.g. AD 1 = 0001, AD) ' yy ': 2 digit representation of year, Padded (00-99).  (e.g. AD 2001 = 10) ' Y ': 1 digit representation of year, e.g. (AD 1 = 1, ad 199 = 199) ' MMMM ': Month in Year (january-december) ' MMM ': Month in the year (JAN-DEC) ' MM ': Month in year, padded (01-12) ' M ': Month in Year (1-12) ' DD ': Day in Month, padded (01 -31) ' d ': Day in Month (1-31) ' eeee ': Day in Week, (sunday-saturday) ' EEE ': Day in Week, (Sun-sat) ' HH ': Hour on Day, p Added (00-23) ' H ': Hour in Day (0-23) ' hh ': Hour in am/pm, padded (01-12) ' H ': Hour in am/pm, (1-12) ' mm ': Minute in H Our, padded (00-59) ' m ': Minute in Hour (0-59) ' SS ': Second in Minute, padded (00-59) ' s ': Second in Minute (0-59) ' a '  : am/pm marker ' Z ': 4 digit (+sign) representation of the TimeZone offset ( -1200-+1200) format string can also be one of The following predefined localizable formats: ' Medium ': equivalent to ' MMM D, y h:mm: SS a ' for en_US locale (e.g. Sep 3, 12:05:08 pm) "short": equivalent to ' m/d/yy h:mm a ' for en_us locale (e.g. 9/3/ 12:05 pm) ' fulldate ': equivalent to ' eeee, MMMM d,y ' for en_us locale (e.g. Friday, September 3,) ' Longdate ': EQ Uivalent to ' MMMM D, y ' for en_us locale (e.g. September 3, "Mediumdate ': equivalent to ' MMM D, y ' for en_us locale  (e.g. Sep 3, 2010) ' ShortDate ': equivalent to ' m/d/yy ' for en_us locale (e.g. 9/3/10) ' Mediumtime ': equivalent to ' h:mm:ss a ' for en_US Loca Le (e.g 12:05:08 pm) ' shorttime ': equivalent to ' h:mm a ' for en_us locale (e.g. 12:05 pm)

Example:

<!        DOCTYPE html>
   

  

If you want to customize the filter, you can do this:

       Avalon.filters.myfilter = function (str, args, ARGS2) {//str is the result calculated before the pipe break, the default framework will help you pass in, and this method must return a value/          * Specific logic *          / return ret;       }

If you want to format the value of the form control, use the $watch callback.

Mini MVVM Framework Avalonjs Learning Tutorial 16, Filter