页面编辑界面→拖拽布局至容器内→将布局转化为层，命名为city。

在层中插入“获取城市数据元素”元素，如下图：

在插入的“获取城市数据元素”上添加数据绑定：属性绑定→{"data--intialsort":sort}

将sort初始化为city：数据绑定→绑定变量初始化。如下图：

在页面上添加无序列表，在<ul>标签上添加数组绑定：webpage_citydata.A() 。在<li>标签上添加文本内容绑定：name  。如下图：

<ul>上：

<li>上：

在<li>标签上设置逻辑→绑定数据编程：_ko.contextFor(_ctx.self[0]).$parent.a( _ko.dataFor(_ctx.self[0]).children());_vm.abc("show");  如下图：

在页面插入模式层，并设置对话框属性相关参数，添加模式层中所调用的层并命名为test 。在模式层上添加逻辑→绑定数据编程：_vm.test("hide");添加数据绑定中的属性绑定：{"data--show":abc}

这一部分是显示城市对应的区县，同样需要用数组实现，所以在test层内再添加一个数组命名为a，在数组内添加绑定文本内容绑定，命名为name。添加文本内容绑定这步与在<li>上面添加文本内容绑定设置相同。数组绑定部分如下图：

将数组a初始化，逻辑→数据绑定→绑定变量初始化（注意类型为array），如下图：