From df830ca4f361c5d95a4d7658289f9019e6b09215 Mon Sep 17 00:00:00 2001
From: stop2stare <emitremmus0235@163.com>
Date: Fri, 9 Feb 2018 18:39:22 +0800
Subject: [PATCH] update readme and examples

---
 README.md                      | 30 ++++++++++++++++++++++++++----
 examples/bookDetail/index.html |  4 ++--
 examples/listview/index.html   |  8 ++++++--
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index b53e462..6cb46db 100644
--- a/README.md
+++ b/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
diff --git a/examples/bookDetail/index.html b/examples/bookDetail/index.html
index ff0012f..7d54fa0 100644
--- a/examples/bookDetail/index.html
+++ b/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>
diff --git a/examples/listview/index.html b/examples/listview/index.html
index 9faafc4..af0f619 100644
--- a/examples/listview/index.html
+++ b/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>