Update orderBy (vuejs#269)

posva · yyx990803 · commit 560d16012ce1 · 2016-04-07T14:39:15.000-04:00
* Update orderBy

* Fix suggestions on orderBy api update

* Add multiple keys for orderBy

* Update index.md
diff --git a/src/api/index.md b/src/api/index.md
@@ -2101,14 +2101,14 @@ type: api
 - **Limited to:** directives that expect `Array` values, e.g. `v-for`
 
 - **Arguments:**
-  - `{String} sortKey`
+  - `{String | Array<String> | Function} ...sortKeys`
   - `{String} [order] - default: 1`
 
 - **Usage:**
 
-  Return a sorted version of the source Array. The `sortKey` is the key to use for the sorting. The optional `order` argument specifies whether the result should be in ascending (`order >= 0`) or descending (`order < 0`) order.
+  Return a sorted version of the source Array. You can pass any number of Strings to sort on keys. You can also pass an array containing the sorting keys or a Function if you want to use your own sorting strategy instead. The optional `order` argument specifies whether the result should be in ascending (`order >= 0`) or descending (`order < 0`) order.
 
-  For arrays of primitive values, any truthy `sortKey` will work.
+  For arrays of primitive values, set `sortKey` to `true`.
 
 - **Example:**
 
@@ -2165,6 +2165,16 @@ type: api
   })
   ```
 
+  Sort using two keys:
+
+  ``` html
+  <ul>
+    <li v-for="user in users | orderBy 'lastName' 'firstName'">
+      {{ user.lastName }} {{ user.firstName }}
+    </li>
+  </ul>
+  ```
+
   {% raw %}
   <div id="orderby-example" class="demo">
     <button @click="order = order * -1">Reverse Sort Order</button>
@@ -2185,6 +2195,85 @@ type: api
   </script>
   {% endraw %}
 
+  Sort using a Function:
+
+  ``` html
+  <div id="orderby-compare-example" class="demo">
+    <button @click="order = order * -1">Reverse Sort Order</button>
+    <ul>
+      <li v-for="user in users | orderBy ageByTen">
+        {{ user.name }} - {{ user.age }}
+      </li>
+    </ul>
+  </div>
+  ```
+
+  ``` js
+  new Vue({
+    el: '#orderby-compare-example',
+    data: {
+      order: 1,
+      users: [
+        {
+          name: 'Jackie',
+          age: 62
+        },
+        {
+          name: 'Chuck',
+          age: 76
+        },
+        {
+          name: 'Bruce',
+          age: 61
+        }
+      ]
+    },
+    methods: {
+      ageByTen: function (a, b) {
+        return Math.floor(a.age / 10) - Math.floor(b.age / 10)
+      }
+    }
+  })
+  ```
+
+  {% raw %}
+  <div id="orderby-compare-example" class="demo">
+    <button @click="order = order * -1">Reverse Sort Order</button>
+    <ul id="orderby-compare-example">
+      <li v-for="user in users | orderBy ageByTen order">
+        {{ user.name }} - {{ user.age }}
+      </li>
+    </ul>
+  </div>
+  <script>
+  new Vue({
+    el: '#orderby-compare-example',
+    data: {
+      order: 1,
+      users: [
+        {
+          name: 'Jackie',
+          age: 62
+        },
+        {
+          name: 'Chuck',
+          age: 76
+        },
+        {
+          name: 'Bruce',
+          age: 61
+        }
+      ]
+    },
+    methods: {
+      ageByTen: function (a, b) {
+        return Math.floor(a.age / 10) - Math.floor(b.age / 10)
+      }
+    }
+  })
+  </script>
+  {% endraw %}
+
 ## Array Extension Methods
 
 Vue.js extends `Array.prototype` with two additional methods that makes it easier to perform some common Array operations while ensuring reactive updates are properly triggered.
