add commits example

yyx990803 · yyx990803 · commit fd2674f98574 · 2014-09-23T21:36:49.000-04:00
diff --git a/examples/commits/app.js b/examples/commits/app.js
@@ -0,0 +1,41 @@
+var apiURL = 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha='
+
+var demo = new Vue({
+
+  el: '#demo',
+
+  data: {
+    branches: ['master', 'dev', 'next'],
+    currentBranch: 'master',
+    commits: null
+  },
+
+  created: function () {
+    this.fetchData()
+    this.$watch('currentBranch', function () {
+      this.fetchData()
+    })
+  },
+
+  filters: {
+    truncate: function (v) {
+      var newline = v.indexOf('\n')
+      return newline > 0 ? v.slice(0, newline) : v
+    },
+    formatDate: function (v) {
+      return v.replace(/T|Z/g, ' ')
+    }
+  },
+
+  methods: {
+    fetchData: function () {
+      var xhr = new XMLHttpRequest()
+      var self = this
+      xhr.open('GET', apiURL + self.currentBranch)
+      xhr.onload = function () {
+        self.commits = JSON.parse(xhr.responseText)
+      }
+      xhr.send()
+    }
+  }
+})
diff --git a/examples/commits/index.html b/examples/commits/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vue.js commits example</title>
+    <style>
+      #demo {
+        font-family: 'Helvetica', Arial, sans-serif;
+      }
+      a {
+        text-decoration: none;
+        color: #f66;
+      }
+      li {
+        line-height: 1.5em;
+        margin-bottom: 20px;
+      }
+      .author, .date {
+        font-weight: bold;
+      }
+    </style>
+    <script src="../../dist/vue.js"></script>
+  </head>
+  <body>
+    <div id="demo">
+      <h1>Latest Vue.js Commits</h1>
+        <template v-repeat="b:branches">
+          <input type="radio"
+            name="branch"
+            id="{{*b}}"
+            value="{{*b}}"
+            v-model="currentBranch">
+          <label for="{{*b}}">{{*b}}</label>
+        </template>
+      <ul>
+        <li v-repeat="commits">
+          <a href="{{html_url}}" target="_blank" class="commit">{{sha.slice(0, 7)}}</a>
+          - <span class="message">{{commit.message | truncate}}</span><br>
+          by <span class="author">{{commit.author.name}}</span>
+          at <span class="date">{{commit.author.date | formatDate}}</span>
+        </li>
+      </ul>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
