如何从声明式剑道ui初始化中提取js函数以提高可读性

How to extract the js function out of declarative kendo ui initialization for readability?

本文关键字：函数 js 提取 可读性 初始化 声明 ui      更新时间：2023-09-26

我有一个带有数据列的剑道网格，该数据列具有自定义下拉列表过滤器(从数据源中选择该列的唯一值)。

它工作，但我想从html中提取function(options) {...}，因为它是可怕的不可读和visual studio 2015不将代码解释为javascript。

<div id="PatrolDurationRecords">
    <div data-filterable='{ "mode": "row" }'
         data-role='grid'
         data-sortable='true'
         data-bind='source: reportData.PatrolDurations, events: {excelExport: excelExportHandler}'
         data-pageable='{ "pageSize": 10 }'
         data-toolbar='["excel"]'
         data-excel='{ "fileName": "PatrolDurations.xlsx", "allPages": "true" }'
         data-columns='[
            {
                "field": "patrol_id_plain",
                "title": "Patrol ID",
                "filterable": false
            },
            {
                "field": "location_name",
                "title": "Location",
                "filterable": {
                    cell: {
                        template: function (args) {
                            args.element.kendoDropDownList({
                            dataTextField: "optionText",
                            dataValueField: "optionValue",
                            valuePrimitive: true,
                            dataSource: {
                                transport: {
                                    read: 
                                        function(options) { //<-- I want to extract this function outside of this html declaration
                                            console.log("viewModel.reportData.PatrolDurations = ");
                                            console.log(viewModel.reportData.PatrolDurations);
                                            var len = viewModel.reportData.PatrolDurations.length;
                                            var locationName;
                                            var setObj = {};
                                            for(var i = 0; i < len; i++)
                                            {
                                                locationName = viewModel.reportData.PatrolDurations[i].location_name;
                                                setObj[locationName] = "";//not concerned with object value, we use setObj as a Set where the keys are the set values
                                            }
                                            var ddlOptions = [];
                                            for(var e in setObj)
                                            {
                                                ddlOptions.push({
                                                    "optionText": e,
                                                    "optionValue": e
                                                });
                                            }
                                            console.log("ddlOptions = ");
                                            console.log(ddlOptions);
                                            options.success(ddlOptions);
                                        }
                                }
                            }
                        });
                    },
                    showOperators: false
                }
            }
            },
            {
                "field": "company_name",
                "title": "Company",
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "patrol_start",
                "title": "Start",
                "filterable": false
            },
            {
                "field": "patrol_end",
                "title": "End",
                "filterable": false
            },
            {
                "field": "patrol_user",
                "title": "Patrolled By",
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "duration",
                "title": "Duration",
                "template": kendo.template($("#durationTemplate").html()),
                "filterable": false
            },
            {
                "title": "",
                "template": kendo.template($("#viewLinkTemplate").html()),
                "filterable": false
            }
        ]'>
    </div>
</div>

使用以下标准方法:

{
    "field": "location_name",
    "title": "Location",
    "filterable": {
        cell: {
            template: myFunction,
            showOperators: false
        }
    }
}

然后在其他地方定义myFunction。

<script>
    function myFunction(args) {
        //args.element...
    }
</script>
相关文章：