update readme and examples

README.md

@@ -7,13 +7,14 @@ A simple HTML template engine, currently a parser. Basically implements ejs synt
 You can simply run the [examples here](https://github.com/stop2stare/leopard/tree/master/examples).
 
 ``` js
-var leo = require('leopard-template')
+var Leopard = require('leopard-template')
+var leo = new Leopard()
 var tpl = '<p>I am <%= name %>!</p>'
 var data = {
   name: 'Leopard'
 }
 
-var html = leo(tpl, data) // '<p>I am Leopard!</p>'
+var html = leo.compile(tpl, data) // '<p>I am Leopard!</p>'
 ```
 
 ## Usage
@@ -27,12 +28,13 @@ $ npm install leopard-template
 Of course you can import **leopard-template** in whatever way you want
 ``` js
 // ES6 import
-import leo from 'leopard-template'
+import Leopard from 'leopard-template'
 
 // CommonJS require
-var leo = require('leopard-template')
+var Leopard = require('leopard-template')
 
 // and then you can start render your templates
+// var leo = new Leopard()
 ```
 
 Or you can also load with html `script` tag
@@ -92,6 +94,26 @@ var loops = 'Now I repeat: ' +
   '</ul>'
 ```
 
+## Filters
+
+Filters are now supported in Leopard, you can custom a filter with `Leopard.filter`:
+
+``` js
+var Leopard = require('leopard-template')
+Leopard.filter('toUpperCase', function(string) {
+  return string.toUpperCase()
+})
+
+var text = '<p><%= 'leopard' | toUpperCase %></p>' // <p>LEOPARD</p>
+```
+
+And also, filters can be chained:
+
+``` js
+// `reverse` is a preset filter
+var text = '<p><%= 'leopard' | toUpperCase | reverse %></p>' // <p>DRAPOEL</p>
+```
+
 ## Test
 
 ``` shell

examples/bookDetail/index.html

@@ -58,8 +58,8 @@
       { "count": 6, "name": "外国文学" }
     ]
   }
-
-  var html = Leopard(tpl, detail)
+  var leo = new Leopard()
+  var html = leo.compile(tpl, detail)
   document.getElementById('app').innerHTML = html
 
   </script>

examples/listview/index.html

@@ -17,13 +17,17 @@
     '</ul>' +
     '<ul style=\"float:left;\">' +
     '<% for (var i = 0; i < 20; i++) { %>' +
-    '<li><%= i %>: I am <%- name %>!</li>' +
+    '<li><%= i %>: I am <%- name | toUpperCase %>!</li>' +
     '<% } %>' +
     '</ul>'
   var data = {
     name: '<em>Leopard</em>'
   }
-  var html = Leopard(tpl, data)
+  Leopard.filter('toUpperCase', function(string) {
+    return string.toUpperCase()
+  })
+  var leo = new Leopard()
+  var html = leo.compile(tpl, data)
   document.getElementById('app').innerHTML = html
 
   </script>