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

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

1 使用场景

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

2 使用方法

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

2.1 新建KS脚本

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

“KDE编辑器”按钮示例

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

新建插件脚本示例

2.2 开发KS脚本

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

var plugin = new FormPlugin({
     afterBindData : function(e){
         // getControl中传入的是自定义控件的标识（key），可在设计器里面查看，并不是方案id（schemaId）
         var customcontrol = this.getView().getControl('helloworld');
 
         // 这里是你要给前端发送的数据，
         var data = {
             text: '你好，自定义控件'
         }
        //调用该自定义控件的setData方法赋值
        customcontrol.setData(data)
    }
});

开发KS脚本示例

2.3 检查返回数据

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

检查界面示例

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

“值返还成功”示例

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

2.4 获取控件数据

修改自定义控件“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
        })        
    })
}

控件数据获取示例

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

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

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

3 前后端交互

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

3.1 前端发送

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

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

3.2 DOM绑定事件

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

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

3.3 后端处理请求

在脚本插件的“customEvent”方法中，处理前端发送过来的请求，具体代码如下所示：

var plugin = new FormPlugin({
    afterBindData : function(e){
         // getControl中传入的是控件的标识（key）不是方案id（schemaId）
        var customcontrol = this.getView().getControl('helloworld');
         var data = {
             text: '你好，自定义控件'
         }
         customcontrol.setData(data)
     },
    customEvent: function(e) {
        // 设计器上自定义控件的标识
        var key = e.getKey()
        // 前端通过model.invoke传给后端的数据
        var args = e.getEventArgs()
       // 前端通过model.invoke定义的事件名
        var eventName = e.getEventName()
        this.getView().showMessage('key: ' + key + ';eventName: ' + eventName + ';args: ' + args)
    }
});

3.4 保存预览

保存上述代码后进行预览，效果如下：

前后端交互成功示例

至此，一个完整的前后端交互案例就完成了！

4 小结

通过上文的学习，相信大家已经掌握了自定义控件前后端通信，也对自定义控件的整体开发有了全新的认识。下面，小编为大家总结一下本文的重点。

在插件中，通过“setData”方法调用控件。该方法接收任意类型的数据，因此开发自定义控件前应该设计好你的控件数据结构；
利用自定义控件“index.js”里的“initFunc”函数，可从“props”中获取到后端传过来的数据；
在控件中，通过调用“model.invoke”方法，给插件发送请求；
在插件中，通过“customEvent”接收自定义控件发送过来的请求，并做好逻辑处理。

以上就是本文的全部内容，自定义控件开发的方法大家学会了吗？

#往期推荐#

# 360°教你搞定“自定义控件开发”（入门篇）

# 一篇揭秘如何实现“徽标”效果的好文，速看！

# 玩转设计器之“跨页面复制元数据&运用格式刷”

# 手把手教你使用pc卡片列表方案

# 帮助文本，不仅仅是简单的文本提示

更多精彩内容，“码”上了解！↓

360°教你搞定“自定义控件开发”(进阶篇)

360°教你搞定“自定义控件开发”(进阶篇)

恭喜您！