「Solid.js项目实战」礼品发放Web应用之三
「Solid.js项目实战」礼品发放Web应用之二
「Solid.js项目实战」礼品发放Web应用之一
当我们在使用数组进行列表展示时，Solid提供了一个十分方便的For组件，这个组件只需要我们提供数组数据和对应的数据到组件的转换方法，它就可以实现界面列表的渲染功能。本例中我们使用For组件来构建礼品列表，之后引入派生Signal的概念，用以简化HTML中的内容，最后对礼品列表项加入了点击事件处理逻辑，实现用户点击礼品列表中的一列表项时，自动高亮这个礼品的功能。
在上一篇文章的代码中，我们最终实现的代码如下图1所示，第41-44行代码是不是看上去很整齐？但是，它也预示着此处代码出现了冗余。代码的目的是将数组gifts()中的每一项元素分别构建为对应的组件，Solid当然也为我们提供了遍历数组的组件，称之为For组件，它提供了一个each属性，通过each属性设置需要遍历的数组，在For组件体内通过回调函数来构建元素。
图1
我们使用For组件重新编写Gift组件，其内容如下图2所示，在图2中，我们在第73行代码使用了For组件，并将它的属性each设置为礼物数组gifts()，这个For组件的组件体内，没有直接使用节点元素，而是使用了一个回调函数，这个回调函数含有一个参数（其实还有一个索引，但本例中未使用），回调函数的参数就是遍历gifts()数组一次所获取的对应元素，比如第一个遍历获取gifts()[0]这个元素，第二次遍历获取gifts()[1]这个元素等等，通过使用遍历数组时的元素，回调函数将其转换为一个合法的组件，并将其返回。
这样每一次遍历数组中的元素便会得到一个对应的Solid组件，依据图2中的代码就是每次遍历gifts()数组中的一个元素，就会生成对应的一个GiftItem组件，此组件的gift属性使用的正是当前的礼物对象，当数组遍历完成了，所有的GiftItem组件构建工作也就随之完成，Solid实现自动对其进行渲染的操作。
图2
通过上述代码，我们实现了将数组中的数据显示为了一个列表内容，但是，这样的操作又导致了selected属性的丢失！我们再仔细地思考下，这个选中状态应该属于列表项的状态还是属于列表自身的状态？因为在礼品列表中，每一个时刻最多只能选中一个礼品，因此，我们存储列表的选中状态只需要保存当前的列表项对应的Id值即可，而不需要保存每一个列表项是否选中的状态。我们在Gift组件中创建一个Signal来表示选中的礼品对象Id值，如下图3所示。
图3
图3中地63行代码创建了一个Signal，其初始值为2，即礼品列表中的第2个礼品（保持与之前的显示效果一致）默认是选中状态，第69行代码设置selected的属性值，它的值是一个关系表达式的计算结果，表示当前遍历的礼品对象的Id值是否与选中的Signal的状态值相同，如果二者相同，则表示当前的列表项处于选中状态，否则为普通状态。这样我们通过在Gift组件中新增一个Signal实现了列表项的选中效果。
派生属性是指使用已有的Signal创建一个新的表达式，这个新的表达式就称为一个派生Signal。当派生Signal所依赖的Signal发生变化时，同样会导致组件的重新渲染，我们以上图3中的选中状态为例，构建出一个派生Signal。
图4
图4中第68行代码创建了一个派生Signal-isSelected为一个箭头函数，它含有一个参数id，表示礼品的Id值，这个函数的返回值为selected()与id的比较结果。我们修改第74行的代码如图4所示，将属性selected的值直接使用isSelected派生Signal表示。
礼品列表通过使用isSelected派生Signal表示了当前是否选中列表项，如果我们需要实现点击列表项时将其高亮的效果，那么，我们只需要将当前选中的列表项所对应的礼品Id值设置给选中Signal就可以了。
将selected/setSelected的创建Signal函数从Gift组件中移至函数之外，如图4第65行代码所示，之后再在GiftItem组件中为列表项在最外层添加一个onClick事件处理器，如图5所示。
图5
图5中第55-57行代码为礼品列表项的点击事件处理函数，它通过selected Signal的setter函数将当前的selected的状态值修改为所点击的礼品项对应的Id值。第59行代码在列表项的最外层添加了onClick事件处理函数，这样，每点击一个礼品列表项，图3中第63行代码所对应的Signal就会发生变化，从而触发界面上的渲染操作，实现了点击礼品项进行高亮的效果。
Solid对数组数据也提供的专门的组件来进行处理，在这个组件中，我们只需要提供数据和转换为组件的逻辑，For组件自动完成列表的渲染工作，之后我们使用派生Signal完成了对组件的选中效果，通过修改当前选中的Id值也展现了派生Signal会在其所依赖的Signal发生变化时触发。本篇文章就介绍这么多内容，谢谢阅读，我们下一篇文章见。
「Solid.js项目实战」礼品发放Web应用之三
「Solid.js项目实战」礼品发放Web应用之二
「Solid.js项目实战」礼品发放Web应用之一
| 留言与评论（共有 0 条评论） “” |
