How to sort the model array before supply to template

Here is my model, how can i sort it before I send to template?

route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return {
            "fruits":[
            {fruit:"mango",color:"yello"},
            {fruit:"banana",color:"muddy yellow"},
            {fruit:"apple",color:"red"}],
          "prices":[9, 10,5 ]
                }
   } 
});

Twiddle Demo

Any one please update my twiddle? looking for ember approch.

here is my hbs:

<h1>Fruit Prices Sorted here</h1> 
<ul>

    <li> </li>

</ul>

<h1>Fruit Prices Sorted here</h1> 
<ul>

    <li> </li>

</ul>

<h1>Fruit Details Sorted by Alphabetically </h1> 
<ul>

    <li> </li>

</ul>
<br>
<h1>Fruit Color Sorted by Alphabetically </h1> 
<ul>

    <li> </li>

</ul>