通过学习《360°教你搞定“自定义控件开发”（入门篇）》一文，业务开发部的小黑成功做出了自己想要的展示页面，但需求是对页面进行操作修改，因此小黑并没有完成全部工作。于是，小黑利用白老师空闲的时间，继续找他请教了关于自定义控件前后端通信的问题。

为帮助大家更好地掌握“自定义控件开发”，小编特地整理了白老师传授小黑的要点，从自定义控件开发的使用场景、使用方法及前后端交互三个方面讲解。

由于业务场景越来越多，利用“自定义控件”去实现一些静态页面或者组件的功能已经无法满足开发人员的需求。因此，开发人员需要“自定义控件”能够动态获取后端返还的数据，且能够实现前后端的交互。

在日常业务场景中，可以使用“Java”插件或者“KDE”脚本插件，给自定义控件传输业务数据。由于“Java”插件和“KDE”脚本的写法大同小异，以下案例仅以“KDE”脚本插件的使用方法作为示范进行讲解。

在开发平台找到对应自定义控件单据所在的应用，点击“KDE图标”打开“KDE编辑器”，如下图所示：

“KDE编辑器”按钮示例

在编辑器中找到对应的单据页面，并新建插件脚本，具体如下图所示：

新建插件脚本示例

新建插件脚本后，将以下代码复制到插件中，并将“helloworld”修改成自己需要使用的对应的值。

返回设计器的单据页面，检查插件是否为“已启用”状态，检查页面如下图所示：

检查界面示例

随后，点击“预览”按钮，页面如下图所示：

“值返还成功”示例

从上图可以看到，“你好，自定义控件”即为“sendganttdata.ks”所定义返回的数据。

修改自定义控件“index.js”里的“initFunc”函数，可从“props”中得到后端传过来数据“text”，具体代码如下所示：

 var initFunc = function(model, props) {
     // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
     KDApi.loadFile('./css/helloworld.css', model, function() {
         // 通过路径去获取html字符串，第一个参数是路径，第二个参数是model，第三个参数是HTML模板中变量的值
         var text = props.data && props.data.text || []
 
         KDApi.getTemplateStringByFilePath('./html/helloworld.html', model, {
             text: text
         }).then(function(result) {
            model.dom.innerHTML = result
        })        
    })
}

控件数据获取示例

通过上述案例，我们顺利完成了自定义控件插件赋值，实现了后端返回数据的获取，解决了纯静态类的自定义控件需求。

然而，当自定义控件的复杂程度提升，需要有“点击事件”、“编辑”等需求时，则需要实现自定义控件和后端插件间的主动通信。

那么，该如何实现自定义控件前后端间的通信呢？接下来，小编为您介绍。

在这一部分，我们会通过前端的点击事件给后端发送请求，后端插件接收到该请求后将弹出提示框，这样即可完成前后端完整的交互。

在“index.js”里，声明“initEvent”函数，监听点击事件，并执行“model.invoke”方法给后端发送请求，具体代码如下所示：

var initEvent = function(model, props){
    //内置了jquery对象，可直接使用$
    $('.helloworld', model.dom).click(function(){
        // model.invoke，用于给后端发送请求，第一个参数是事件名，可自定义；第二个参数是发送给后端的数据，可以是任意类型
        model.invoke('click', 'Hello World!')
    })
}

在“index.js”里的“initFunc”函数中，通过“initEvent”给“DOM”绑定操作事件，具体代码如下所示：

 var initFunc = function(model, props) {
     // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
     KDApi.loadFile