Javascript 在ractive js中使用下划线进行排序
我正在使用ractive js作为模板 下面是我的模板Javascript 在ractive js中使用下划线进行排序,javascript,ractivejs,Javascript,Ractivejs,我正在使用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-heade
<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">
Next
</button>
</div>
</div>
</div>
</div>
</form>
{
"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
}
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();
有谁能帮我实现这一点吗？您可以在数据对象上添加下划线，或者与其他数据内联：
data: {
_: _,
selectedServices: _,
...
}
$.Circle.Varriables.BookingForm原型：
Ractive.protototype.data = { _: _ }
然后您可以直接在模板中使用它：
{{#each _.sortBy(services, 'serviceOrder')}}
<!-- block content -->
{{/each}}
var r=new-Ractive({
el:document.body，
模板：“#模板”，
数据：{
“sortBy”：“服务订单”，
"_": _,
“选定服务”：[]，
“邮递”：“，
“服务”：[{
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M2300000IOABEAC”，
“IsMultiple”：错误，
“服务订单”：3，
“标题”：“冰箱”
}, {
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M23000000 IOAGEAC”，
“IsMultiple”：错误，
“服务订单”：4，
“标题”：“烤箱”
}, {
“基准时间”：0.5，
“更正”：0.5，
“Id”：“A0M23000000 IOALEAC”，
“IsMultiple”：错误，
“服务订单”：5，
“标题”：“墙”
}, {
“基准时间”：0.333，
“更正”：空，
“Id”：“A0M23000000 IOAMEAS”，
“IsMultiple”：没错，
“serviceOrder”：0，
“标题”：“卧室”
}, {
“基准时间”：0.5，
“更正”：0.5，
“Id”：“A0M23000000 IOAQEAC”，
“IsMultiple”：错误，
“服务订单”：6，
“标题”：“窗口”
}, {
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M23000000 IOA区域”，
“IsMultiple”：没错，
“服务订单”：1，
“标题”：“浴室”
}, {
“基准时间”：0.333，
“更正”：0.5，
“Id”：“A0M2300000IOAVEAC”，
“IsMultiple”：错误，
“服务订单”：7，
“标题”：“盲板”
}, {
“基准时间”：0.5，
“更正”：0.2，
“Id”：“A0M23000000 IOAWEAS”，
“IsMultiple”：错误，
“服务订单”：2，
“标题”：“文件柜”
}]
}
})；
{{#每个服务0:key}
{{key}}
{{/每个}}
{{{{每个{.sortBy（服务，sortBy）}
{{Title}}
{{#如果是多重的}
{{/if}
{{/每个}}
您可以在数据对象上包含下划线，或者与其余数据内联：
data: {
_: _,
selectedServices: _,
...
}
或者，如果要在所有组件中使用，或者要将数据封装在$.Circle.Varriables.BookingForm
中，也可以使用原型：
Ractive.protototype.data = { _: _ }
然后您可以直接在模板中使用它：
{{#each _.sortBy(services, 'serviceOrder')}}
<!-- block content -->
{{/each}}
var r=new-Ractive({
el:document.body，
模板：“#模板”，
数据：{
“sortBy”：“服务订单”，
"_": _,
“选定服务”：[]，
“邮递”：“，
“服务”：[{
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M2300000IOABEAC”，
“IsMultiple”：错误，
“服务订单”：3，
“标题”：“冰箱”
}, {
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M23000000 IOAGEAC”，
“IsMultiple”：错误，
“服务订单”：4，
“标题”：“烤箱”
}, {
“基准时间”：0.5，
“更正”：0.5，
“Id”：“A0M23000000 IOALEAC”，
“IsMultiple”：错误，
“服务订单”：5，
“标题”：“墙”
}, {
“基准时间”：0.333，
“更正”：空，
“Id”：“A0M23000000 IOAMEAS”，
“IsMultiple”：没错，
“serviceOrder”：0，
“标题”：“卧室”
}, {
“基准时间”：0.5，
“更正”：0.5，
“Id”：“A0M23000000 IOAQEAC”，
“IsMultiple”：错误，
“服务订单”：6，
“标题”：“窗口”
}, {
“基准时间”：0.5，
“更正”：空，
“Id”：“A0M23000000 IOA区域”，
“IsMultiple”：没错，
“服务订单”：1，
“标题”：“浴室”
}, {
“基准时间”：0.333，
“更正”：0.5，
“Id”：“A0M2300000IOAVEAC”，
“IsMultiple”：错误，
“服务订单”：7，
“标题”：“盲板”
}, {
“基准时间”：0.5，
“更正”：0.2，
“Id”：“A0M23000000 IOAWEAS”，
“IsMultiple”：错误，
“服务订单”：2，
“标题”：“文件柜”
}]
}
})；
{{#每个服务0:key}
{{key}}
{{/每个}}
{{{{每个{.sortBy（服务，sortBy）}
{{Title}}
{{#如果是多重的}
{{/if}
{{/每个}}