Wie extrahiert man die js-Funktion aus der deklarativen Kendo-UI-Initialisierung für die Lesbarkeit?

Question

Ich habe ein Kendo-Gitter mit einer Datenspalte, die einen benutzerdefinierten Dropdown-Listenfilter hat (der die eindeutigen Werte dieser Spalte aus der Datenquelle auswählt).

Es funktioniert, aber ich möchte die function(options) {...} aus dem HTML extrahieren, da es furchtbar unlesbar ist und Visual Studio 2015 den Code nicht als Javascript interpretiert.

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

Answer 1

den folgenden Standardansatz verwenden:

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

Und dann myFunction woanders definieren.

<script> 

    function myFunction(args) { 
     //args.element... 
    } 

</script>