using underscore in ractive js to sort

Question

I am using ractive js for the templating.

Below is my template

<form data-type="Contractor" id="Contractor">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="box no-shadow box-fullborder no-radius form-section">
            <div class="box-header gray-bg">
                <h5>Select Postal Code</h5>
            </div>
            <div class="box-body gray-bg">

              <div class="form-group">
                <label>Postal Code</label>
                <select name="{{postal}}"  class="form-control select2 postal"  data-placeholder="Select your postal code" >


                </select>
              </div><!-- /.form-group -->


            </div>
        </div>
        {{#if isPostalSelected}}
        <div class="box no-shadow box-fullborder no-radius form-section">
            <div class="box-header gray-bg">
                <h5>Select Services</h5>
            </div>
            <div class="box-body gray-bg">
                {{#each services}}

                    <div class="form-group col-md-6 col-sm-12 col-xs-12">
                        <label>
                            <input type="checkbox" name="{{ selectedServices }}" value="{{Id}}" class="minimal flat-green"/>
                            <span>{{Title}}</span>
                        </label>
                        {{#if IsMultiple}}
                        <label>
                            <input class="timeRange" type="text" name="range_5" value="">
                        </label>
                        {{/if}}
                    </div>

                {{/each}}


            </div>

        </div>
        {{/if}}
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="box no-shadow box-fullborder no-radius form-section">
            <div class="box-body gray-bg">
                <div class="pull-right">
                  <button type="submit" class="btn btn-sm btn-flat" data-action="savePostal" data-form="Contractor" data-id="Contractor">
                    &nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;
                  </button>

                </div>
            </div>
        </div>
    </div>
</form>

And below is my Json which I am passing in the template

{
  "selectedServices": [],
  "postal": "",
  "services": [
    {
      "BaseTime": 0.5,
      "Correction": null,
      "Id": "a0M23000000IoabEAC",
      "IsMultiple": false,
      "serviceOrder": 3,
      "Title": "Fridge"
    },
    {
      "BaseTime": 0.5,
      "Correction": null,
      "Id": "a0M23000000IoagEAC",
      "IsMultiple": false,
      "serviceOrder": 4,
      "Title": "Oven"
    },
    {
      "BaseTime": 0.5,
      "Correction": 0.5,
      "Id": "a0M23000000IoalEAC",
      "IsMultiple": false,
      "serviceOrder": 5,
      "Title": "Walls"
    },
    {
      "BaseTime": 0.333,
      "Correction": null,
      "Id": "a0M23000000IoaMEAS",
      "IsMultiple": true,
      "serviceOrder": 0,
      "Title": "Bedrooms"
    },
    {
      "BaseTime": 0.5,
      "Correction": 0.5,
      "Id": "a0M23000000IoaqEAC",
      "IsMultiple": false,
      "serviceOrder": 6,
      "Title": "Windows"
    },
    {
      "BaseTime": 0.5,
      "Correction": null,
      "Id": "a0M23000000IoaREAS",
      "IsMultiple": true,
      "serviceOrder": 1,
      "Title": "Bathrooms"
    },
    {
      "BaseTime": 0.333,
      "Correction": 0.5,
      "Id": "a0M23000000IoavEAC",
      "IsMultiple": false,
      "serviceOrder": 7,
      "Title": "Blinds"
    },
    {
      "BaseTime": 0.5,
      "Correction": 0.2,
      "Id": "a0M23000000IoaWEAS",
      "IsMultiple": false,
      "serviceOrder": 2,
      "Title": "Cabinets"
    }
  ],
  "isPostalSelected": true
}

I want to sort column of services by serviceOrder.

I tried using example given by ractive but failed :(

Below is my javascript code for render ractive template

 cerateBookingForm = function(){
                        var d = $.Deferred();
                        bookingForm = new Ractive({
                            el: '#bookingForm',
                            template: '#FF_Booking_Form',
                            data: $.Circle.Varriables.BookingForm,
                            testMethod : function(){
                                console.log('test');
                                console.log(data);
                            },
                            onrender : function(data){
                                console.log('rendered');
                                d.resolve(data);
                            },
                            onupdate : function(){
                                $.Circle.App.Ui.checkbox();
                                $.Circle.App.Ui.timeRange();
                                }
                        });
                        return d;
                    }

cerateBookingForm();

Can anyone help me how to achieve this ?

Answer 1

You can include underscore on your data object, either inline with the rest of the data:

data: {
    _: _,
    selectedServices: _,
    ...
}

Or you can also put on the prototype if you want to use in all components or to keep your data get encapsulated in $.Circle.Varriables.BookingForm:

Ractive.protototype.data = { _: _ }

Then you can just use it directly in your template:

{{#each _.sortBy(services, 'serviceOrder')}}
    <!-- block content -->
{{/each}}

You can also make it dynamic by using a reference:

{{#each _.sortBy(services, sortBy)}}

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        "sortBy": 'serviceOrder',
		"_": _,
        "selectedServices": [],
        "postal": "",
        "services": [{
            "BaseTime": 0.5,
            "Correction": null,
            "Id": "a0M23000000IoabEAC",
            "IsMultiple": false,
            "serviceOrder": 3,
            "Title": "Fridge"
        }, {
            "BaseTime": 0.5,
            "Correction": null,
            "Id": "a0M23000000IoagEAC",
            "IsMultiple": false,
            "serviceOrder": 4,
            "Title": "Oven"
        }, {
            "BaseTime": 0.5,
            "Correction": 0.5,
            "Id": "a0M23000000IoalEAC",
            "IsMultiple": false,
            "serviceOrder": 5,
            "Title": "Walls"
        }, {
            "BaseTime": 0.333,
            "Correction": null,
            "Id": "a0M23000000IoaMEAS",
            "IsMultiple": true,
            "serviceOrder": 0,
            "Title": "Bedrooms"
        }, {
            "BaseTime": 0.5,
            "Correction": 0.5,
            "Id": "a0M23000000IoaqEAC",
            "IsMultiple": false,
            "serviceOrder": 6,
            "Title": "Windows"
        }, {
            "BaseTime": 0.5,
            "Correction": null,
            "Id": "a0M23000000IoaREAS",
            "IsMultiple": true,
            "serviceOrder": 1,
            "Title": "Bathrooms"
        }, {
            "BaseTime": 0.333,
            "Correction": 0.5,
            "Id": "a0M23000000IoavEAC",
            "IsMultiple": false,
            "serviceOrder": 7,
            "Title": "Blinds"
        }, {
            "BaseTime": 0.5,
            "Correction": 0.2,
            "Id": "a0M23000000IoaWEAS",
            "IsMultiple": false,
            "serviceOrder": 2,
            "Title": "Cabinets"
        }]
    }
});

<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
<script src='http://cdn.ractivejs.org/edge/ractive.min.js'></script>
<script id='template' type='text/ractive'>
	{{#each services.0:key}}
		<div><label><input type='radio' name='{{~/sortBy}}' value='{{key}}'> {{key}}</label></div>
	{{/each}}
    {{#each _.sortBy(services, sortBy)}}

    <div class="form-group col-md-6 col-sm-12 col-xs-12">
        <label>
            <input type="checkbox" name="{{ ~/selectedServices }}" value="{{Id}}" class="minimal flat-green" />
            <span>{{Title}}</span>
        </label>
        {{#if IsMultiple}}
        <label>
            <input class="timeRange" type="text" name="range_5" value="">
        </label>
        {{/if}}
    </div>

    {{/each}}

</script>