在Ractive JS中使用下划線進行排序

Question

我正在使用ractive js進行模板制作。

下面是我的模板

<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>

下面是我在模板中傳遞的我的Json

{
  "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
}

我想按serviceOrder對服務列進行排序。

我嘗試使用ractive給出的示例，但失敗了:(

以下是我的用於渲染活動模板的JavaScript代碼

 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();

誰能幫我實現這個目標？

Answer 1

您可以在數據對象上包括下划線，或者與其他數據內聯：

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

或者，如果您想在所有組件中使用或將數據封裝在$.Circle.Varriables.BookingForm也可以放置prototype ：

Ractive.protototype.data = { _: _ }

然后，您可以直接在模板中使用它：

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

您還可以使用參考將其動態化：

{{#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>