逻辑综合篇

• 产品设定
• 元素编辑
• 编辑元素
• 公有属性
• 数据绑定
• 数组操作

本篇会介绍一些通过综合使用逻辑和数据绑定功能才可以实现的效果。

1. 创建和初始化数组

数据绑定→绑定变量初始化：高级编辑→添加数组：shuzu→添加对象→添加项→xiang：a1→添加对象→添加项→xiang：b2。

2. 使用逻辑修改数组对象

（1）数组绑定一个元素

右键单击该元素→逻辑→数据绑定→绑定模式：数组绑定→绑定参数：shuzu。

绑定变量初始化→高级编辑：添加数组（Array）：shuzu（对应数组绑定的参数）→添加对象（Object）→添加值（Append）：xuanxiangming：第一行→添加对象（Object）→添加值（Append）：xuanxiangming：第二行→添加对象（Object）→添加值（Append）：xuanxiangming：第三行→添加对象（Object）→添加值（Append）：xuanxiangming：第四行。

提示：被绑定元素为需要循环内容的父元素，最终会循环父元素中所有内容。

（2）绑定需要循环内容

右键点击该元素的子元素→逻辑→数据绑定→绑定参数：属性绑定→绑定参数：{"xuanxiangming":"zidingyi_"+ $index()}（xuanxiangming对应数组中的变量名，zidingyi_ 是己定义的一个固定的前缀，$index()是添加了一个不固定的后缀，组成一个不固定的name。循环出来的文本框，第一个的xuanxiangming值为zidingyi_0,第二个为zidingyi_1，以此类推 ）。

（3）绑定数据编程

下面的操作通过给按钮设置逻辑来实现效果，文末会有效果展示。

从后添加：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "push",
    "shuzu", {
    "xuanxiangming":1
    }
  ]
}]);

释义：给数组（shuzu）从后添加（push）一个值为（1）的数组项（xuanxiangming）。

从后删除：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "pop",
    "shuzu",
    1
  ]
}]);

释义：将数组（shuzu）从后删除（pop）（1）个数组项。

从头添加：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "unshift",
    "shuzu", {
    "xuanxiangming":2
    }
  ]
}]);

释义：给数组（shuzu）从头添加（unshift）一个值为（2）的数组项（xuanxiangming）。

从头删除：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "shift",
    "shuzu",
    1
  ]
}]);

释义：给数组（shuzu）从头删除（shift）（1）个数组项。

倒叙排列：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "reverse",
    "shuzu"
  ]
}]);

释义：将数组（shuzu）的数组项倒叙（reverse）排列。

删除数组：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "splice",
    "shuzu"
    2,
    1
  ]
}]);

释义：在数组（shuzu）中删除（splice）在第（2）项之后的（1）个数组项。

移除数组：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "remove",
    "shuzu",
    2
  ]
}]);

释义：在数组（shuzu）的第（2）项之后移除（remove）一个数组项。

全部移除：

添加一个按钮→右键点击按钮→逻辑→产生效果：绑定数据编程→高级设置：

$.wwclass.runCommand([{
  command: "vmArrFuc",
  params: [
    "removeAll",
    "shuzu"
  ]
}]);

释义：将数组（shuzu）的数组项全部移除（removeall）。

效果如下：