本人一向比较喜欢折腾，玩了这么久的knockoutjs，总觉得不够劲，于是又开始准备折腾自己了。

最近在完善Magicodes.WeiChat微信开发框架时，发现之前做的自定义菜单这块太不给力了，而各种第三方平台在这一块做得也比较渣，功能不全不说，界面还很不友好，于是决心重整一版，以满足需求。

下面先上图，新的UI界面如下所示：

如何实现这个功能呢？下面请等我一一道来吧。

左侧树形结构绑定

HTML模板如下所示：

这里我解释一下，上述模板用到了两个foreach循环，以便绑定这个两级列表。实际上如果数据结构支持的话，ko是可以递归的绑定的。ko的强大性是毋庸置疑的。然后注意这个注释：“”，这个真的不是注释，这个是有用的。为了不产生脏元素，ko支持这种绑定写法。这里先用if做了判断，然后再绑定子集。其余的，就是简单的data-bind语法了。

通过上述模板，我们注意到数据结构中两个关键点：Menus和sub_button，那我们就来看看viewModel。viewModel中定义了Menus = ko.observableArray([])，然后使用Ajax获取数据来填充：

//初始化，加载数据            this.Init = function () {                mwc.ui.setBusy();                self.Api.request('GET', {                    url: '/api/Menus',                    func: function (data) {                        mwc.ui.clearBusy();                        $.each(data, function (i, v) {                            if (v.sub_button) {                                $.each(v.sub_button, function (i1, v1) {                                    v.sub_button[i1] = $.extend(self.getModelTpl(), v1);                                })                            }                            data[i] = $.extend(self.getModelTpl(), v);                        });                        self.Menus(ko.mapping.fromJS(data));                    }                });            };

注意，因为方便，这里使用了knockout.mapping js，请注意ko.mapping.fromJS方法。

右侧编辑模板绑定

这块无疑是比较复杂的一块，我们先进行肢解：

通用模块：顶部按钮组、名称输入框、保存按钮

模板（按微信类型加载不同模板）

我们先来看看整体的编辑模板：

由模板可知，整个编辑模块由类型按钮组、名称框、动态模板、保存按钮组成。接下来我就先介绍下类型按钮组的定义与绑定：

类型按钮组——knockout component

如上述代码中，使用了html标签buttonschoices。而这个标签就是我定义的knockout compoent。使用knockout compoent能做什么呢？就如上述代码中，我们可以知道以下几点：

返回HTML模板

传递参数，绑定compoent ViewModel

那么封装knockout compoent，有助于我们封装一些通用UI组件，就比如按钮组类型选择。我们先来一览代码：

//按钮组选择组件ko.components.register('buttonschoices', {    viewModel: function (params) {        var self = this;        //所选值        this.SelectValue = ko.observable();        //text：文本        //value：值        //icon：图标        //des:描述        this.SelectItem = ko.observable({ text: "", value: "", icon: "", des: "" });        //选择模型        this.SelectsModel = ko.observableArray([]);        if (params && typeof (params.SelectsModel()) != "undefined") {            self.SelectsModel(params.SelectsModel());            if (typeof (params.SelectValue()) != "undefined") {                self.SelectValue(params.SelectValue());                self.SelectItem($.grep(self.SelectsModel(), function (v, i) { return v.value == self.SelectValue() })[0]);            }        }        this.GetActiveCss = function (item) {            return item.value == self.SelectValue() ? "active btn-primary" : "";        }        this.buttonClick = function (item) {            self.SelectValue(item.value);            self.SelectItem(item);            params.SelectValue(item.value);        }    },    template: '
     
      ' +                    '
      ' +                '
     
' +                '
     
      ' +                    '
      ' +                '
     
'});

整个组件代码很简洁明了，通过ko.components.register注册组件，buttonschoices为组件名称，整个组件由两部分组成：

viewModel：视图模型

template：模板

其中，viewModel接收了传入参数，并且进行了处理。我们来依次解析这个viewModel：

SelectValue：所选指。这个所选指会根据传入参数（还记得前面的“<buttonschoices params="SelectsModel: $root.SelectTypes,SelectValue:type"></buttonschoices>”吗，其中SelectValue:type就是传入了参数SelectValue）进行赋值，如右侧代码：self.SelectValue(params.SelectValue())。

SelectItem：所选项。项结构为{ text: "", value: "", icon: "", des: "" }，分别代表文本、值、图标和描述。

SelectsModel：选择模型，就是列表模型。有多少个按钮，就看其有多少个项了。传入参数见“SelectsModel: $root.SelectTypes”。我们来看看这个$root.SelectTypes是怎么定义的：

//类型选择            this.SelectTypes = ko.observableArray([                { text: "点击推事件", value: "click", icon: "fa-font", des: "用户点击此类型按钮后，微信服务器会通过消息接口推送消息类型为event    的结构给开发者（参考消息接口指南），并且带上按钮中开发者填写的key值，开发者可以通过自定义的key值与用户进行交互" },                { text: "跳转URL", value: "view", icon: "fa-link", des: "用户点击此类型按钮后，微信客户端将会打开开发者在按钮中填写的网页URL，可与网页授权获取用户基本信息接口结合，获得用户基本信息。" },                { text: "扫码推事件", value: "scancode_push", icon: "fa-qrcode", des: "用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后显示扫描结果（如果是URL，将进入URL），且会将扫码的结果传给开发者，开发者可以下发消息。" },                { text: "扫码推事件且弹出“消息接收中”提示框", value: "scancode_waitmsg", icon: "fa-qrcode", des: "用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后，将扫码的结果传给开发者，同时收起扫一扫工具，然后弹出“消息接收中”提示框，随后可能会收到开发者下发的消息。" },                { text: "弹出系统拍照发图", value: "pic_sysphoto", icon: "fa-camera", des: "用户点击按钮后，微信客户端将调起系统相机，完成拍照操作后，会将拍摄的相片发送给开发者，并推送事件给开发者，同时收起系统相机，随后可能会收到开发者下发的消息。" },                { text: "弹出拍照或者相册发图", value: "pic_photo_or_album", icon: "fa-camera", des: "用户点击按钮后，微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。" },                { text: "弹出微信相册发图器", value: "pic_weixin", icon: "fa-picture-o", des: "用户点击按钮后，微信客户端将调起微信相册，完成选择操作后，将选择的相片发送给开发者的服务器，并推送事件给开发者，同时收起相册，随后可能会收到开发者下发的消息。" },                { text: "弹出地理位置选择器", value: "location_select", icon: "fa-map-marker", des: "用户点击按钮后，微信客户端将调起地理位置选择工具，完成选择操作后，将选择的地理位置发送给开发者的服务器，同时收起位置选择工具，随后可能会收到开发者下发的消息。" },                { text: "下发消息（除文本消息）", value: "media_id", icon: "fa-newspaper-o", des: "用户点击按钮后，微信服务器会将开发者填写的永久素材id对应的素材下发给用户，永久素材类型可以是图片、音频、视频、图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。" },                { text: "跳转图文消息URL", value: "view_limited", icon: "fa-envelope", des: "用户点击按钮后，微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL，永久素材类型只支持图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。" }            ]);

众所周知，微信自定义菜单支持10中类型的按钮，那么这里是其类型的定义。这也说明，这个按钮组是完全通用的，你只要给予与上述结构一致的数据，其就能显示成当前效果。

GetActiveCss：获取当前所选样式。选中返回选中样式，否则返回空。

buttonClick：按钮点击事件，这里拿到的是数据项，ko就是这么方便。然后值得注意的是，参数是双向的，我们可以利用“params.SelectValue(item.value);”来回写值，这样编辑模型的类型值才会产生改变。

viewModel很简单，template也很简单，就是将刚才所说的viewModel绑定，用到了BootStrap按钮组样式“btn-group”，用foreach绑定SelectsModel，然后逐个绑定。

注意：

$parent表示父级对象，即乃父，因为foreach之后，其实对象已经指定到了乃父的儿子（SelectsModel）的某个儿子（$data）上，而GetActiveCss是viewModel的女儿，自然要通过乃父来获取了，毕竟其乃父的儿子的子孙并不是她。

$data表示当前项，即乃父的儿子的某个儿子，用于循环中获取当前项数据。

with类似于using命名空间一样，用了它，下面的元素都可以省却改命名空间了。

是不是很简单的样子。我们再来说说模板：

动态加载模板

首先，我们先聚焦到以下代码：

首先我们得明确以下内容：

template语法用于绑定模板，其中name用于指定模板名称，这里绑定了$root.GetEditTemplateName方法，data用于指定模板的viewModel。

然后我们再来看看GetEditTemplateName怎么回事？如下所示：

//根据类型获取编辑模板            this.GetEditTemplateName = function (data) {                switch (data.type()) {                    case "empty":                        return "emptyTemplate";                    case "media_id":                    case "view_limited":                        return "media_idTemplate";                    case "view":                        return "urlTemplate"                    default:                        return "keyTemplate";                }            };

看起来也蛮简单的样子，就返回了一个模板名称，那我们再继续来看看这些模板。

模板的定义也蛮简单的，id和上面的字符串是一致的，类型必须为text/html。上面模板分别为空模板，关键字模板，链接模板和素材模板。

其中素材模板里面使用了自定义的component，和之前的buttonschoices一样，封装了多图文选择代码。

由于组件news-choice-button和news-choice-modal需要讲解的篇幅比较长，这里就暂不介绍了。

至于增删改查，对于ko来说，都是操作数据模型。比如左侧树形结构的增删，则是对Menus数组的增减操作，而编辑，则需要更新数组中的数据项。viewModel的修改，ko会自动重绘UI。这里就不多介绍了。

总结

通过使用knockoutjs 的动态模板，我们可以很方便的根据需要加载不同的模板进行绑定显示。而通过knockoutjs component的封装，我们可以很方便的实现对业务或者通用UI组件的封装，以达到重复使用的目的。