add tree example

yyx990803 · yyx990803 · commit 1057d7359d69 · 2014-09-22T19:05:05.000-04:00
diff --git a/examples/tree/index.html b/examples/tree/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue.js tree-view demo</title>
+    <style>
+      body {
+        font-family: monospace;
+      }
+      .item {
+        cursor: pointer;
+      }
+      ul {
+        padding-left: 1em;
+        list-style-type: dot;
+      }
+    </style>
+    <script src="../../dist/vue.js"></script>
+  </head>
+  <body>
+
+    <!-- item template -->
+    <script type="text/x-template" id="item-template">
+      <div v-style="color: isFolder ? '#333' : '#999'"
+        v-on="click: toggle, dblclick: changeType">
+        {{model.name}}
+        <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+      </div>
+      <ul v-show="open" v-if="isFolder">
+        <li class="item"
+          v-repeat="model: model.children | sortByChildren"
+          v-component="item">
+        </li>
+        <li v-on="click: addChild">+</li>
+      </ul>
+    </script>
+
+    <p>(You can double click on an item to turn it into a folder.)</p>
+
+    <!-- the demo root element -->
+    <ul id="demo">
+      <li class="item"
+        v-component="item"
+        v-with="model: treeData">
+      </li>
+    </ul>
+
+    <!-- demo code -->
+    <script src="tree.js"></script>
+  </body>
+</html>
diff --git a/examples/tree/tree.js b/examples/tree/tree.js
@@ -0,0 +1,81 @@
+// demo data
+var data = {
+  name: 'My Tree',
+  children: [
+    { name: 'hello' },
+    { name: 'wat' },
+    {
+      name: 'child folder',
+      children: [
+        {
+          name: 'child folder',
+          children: [
+            { name: 'hello' },
+            { name: 'wat' }
+          ]
+        },
+        { name: 'hello' },
+        { name: 'wat' },
+        {
+          name: 'child folder',
+          children: [
+            { name: 'hello' },
+            { name: 'wat' }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+// define the item component
+Vue.component('item', {
+  template: '#item-template',
+  data: function () {
+    return {
+      open: false
+    }
+  },
+  computed: {
+    isFolder: function () {
+      return this.model.children &&
+        this.model.children.length
+    }
+  },
+  filters: {
+    sortByChildren: function (list) {
+      return list.slice().sort(function (a, b) {
+        var alen = a.children ? 1 : 0
+        var blen = b.children ? 1 : 0
+        return alen > blen ? 1 : -1
+      })
+    }
+  },
+  methods: {
+    toggle: function () {
+      if (this.isFolder) {
+        this.open = !this.open
+      }
+    },
+    changeType: function () {
+      if (!this.isFolder) {
+        this.model.$add('children', [])
+        this.addChild()
+        this.open = true
+      }
+    },
+    addChild: function () {
+      this.model.children.push({
+        name: 'new stuff'
+      })
+    }
+  }
+})
+
+// boot up the demo
+var demo = new Vue({
+  el: '#demo',
+  data: {
+    treeData: data
+  }
+})
