Add computed properties doc and example

blikblum · Jun 3, 2019 · fc1af61 · fc1af61
1 parent f29f728
commit fc1af61
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/docs/_harp/docs/guide/_data.json b/docs/_harp/docs/guide/_data.json
@@ -59,6 +59,10 @@
       }
     }
   },
+  "computed-properties": {
+    "title": "Computed Properties",
+    "sections": {}
+  },
   "iteration": {
     "title": "Iteration binding",
     "sections": {}

diff --git a/docs/_harp/docs/guide/_sections/computed-properties.md b/docs/_harp/docs/guide/_sections/computed-properties.md
@@ -0,0 +1,5 @@
+Computed properties are re-evaluated when one or more dependent properties change. Declaring computed properties in Tinybind.js is possible by using buitin `watch` formatter followed by its dependencies. The following text binding will get re-evaluated when either the event's `start` or `end` attribute changes.
+
+```html
+<span rv-text="dateRange | watch start end"></span>
+```
diff --git a/examples/computed.html b/examples/computed.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="../dist/tinybind.js"></script>
+
+  <title>Computed</title>
+</head>
+
+<body>
+  <h2>Computed properties</h2>
+  <div id="test">
+    <button rv-on-click="incStart">Inc start</button>
+    <button rv-on-click="incEnd">Inc end</button>
+
+    <span rv-text="dateRange | watch start end"></span>
+  </div>
+
+
+  <script>
+    var model = {
+      start: 1,
+      end: 2,
+      get dateRange() {
+        return 'From ' + this.start + ' to ' + this.end
+      },
+      incStart() {
+        model.start++
+      },
+      incEnd() {
+        model.end++
+      }
+    }
+    tinybind.bind(document.getElementById("test"), model);
+  </script>
+</body>
+
+</html>