00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们要去完成删除属性值的操作。那咱们呢,去看一下他已经写好的这个项王。比如说啊老师选择一个一级分类,比如说手机。以及手机通讯以及相应的手机。那么咱们的会向服务器发请求,以及服务器做出响应,那么拿到服务器的这些数据啊,咱们就可以展示出来了。那比如说啊,现在咱们已经展示了一个属性对吧,是内存以及也有相应的属性值,分别256128512。那么当你点击修改的时候啊,那这块是不是展示出咱们相应的属性以及属性值。而这里的属性值啊,是可以删除掉的,是有删除的操作的。
01:00
那比如说我选中128。对不,那么当你点击这个按钮的时候,你会发现它弹出了一个,这个其实是饿了么UI当中的一个组件。叫做气泡圈块,对不,那么当你你看它提示啊,你确定要删除128T吗?啊,那么当你点击确定的时候,那真的会删除。所以说接下来啊,咱们呢,去完成删除的操作。那咱们呢,去看一下咱们正在开发的这个项目啊。比如说手机。手机通讯手机对吧,那咱们现在当点击这个按钮啊,是没有任何的反应的,因为咱们根本没有写这里的业务逻辑呢。对吧,那咱们呢,先完成第一件事儿,就是当你点击这个删除按钮的时候,啊,弹出一个哎,气泡确认框。那他使用的呢,是饿了么UI当中的一个组件,叫做泡泡搜一下。
02:02
哎,叫做泡泡口放气泡圈框。那咱们呢,可以看一下的,比如说这儿有一个按钮,一点击你看这不就弹出来了吗。对吧,啊,那咱们呢,所用的呢,就是第一个这样的一个效果,对吧,那咱们呢,看一下它怎么用。那很简单,它呢是一个组件,叫做EL杠泡泡。对不,那以及有相应的抬头,那抬头是什么?是不是就这里的标题。对吧,那以及还有个什么button按钮,Button按钮这块写的是不是叫删除啊,删除是谁,其实就是这个按钮。对吧,这不是一个EL button对吧,那所以说找到咱们的相应的组件,咱们找一下子。那找到咱们相应的那块的结构,那应该呢,是在底部这对吧,添加或者是修改属性的结构。它呢,应该是在咱们的table的最后一列,对吧,那咱们呢,找一下相应的table,那先把没用的线给它折上对吧?它呢应该是table的最后一列。
03:10
对吧,那咱们找一下应该在哪呢,是不是在这。那这个呢,老师呢,为了好看一些啊,我给他呢提上来。对吧,那这个呢,你看他的icon icon这不是delete吗。对吧,哎,以及size为mini。那这个呢,其实就是咱们的那个删除的按钮。对吧,那么当你一点击这个按钮的时候,那你要弹出一个气泡确认框,那咱们呢,就把人家的相应的结构你给他带过来就行了。对吧,啊,复制粘贴过来。咱。那咱们呢,把它相应的结构啊给它捞过来,那咱们呢,格式化一下,那又回去了是吧,那咱们呢,看一下这个结构。那首先说EL。杠泡泡气泡驱认框里面放了一个1BUTTON对吧,其实这个1BUTTON就是这就是上面的这个。
04:04
对吧,但是呢,要注意这个button身上有个lo的这样的一个属性,值为reference。那咱们呢,可以把它的这个属性值放到咱的这个按钮上,对吧,把它的这个按钮啊,咱就给它去掉了,用咱自己写好的这个按钮。对吧。那这个呢,咱们呢,可以看一下的老师呢,格式化一下。对吧,那咱们呢,可以,诶保存格式化一下,那咱们呢,可以回到咱们的项目当中,咱们先看一下有没有效果,对吧,那万一没有呢,没有你再调一下它的结构,看一下数据。那么当你点击删除按钮的时候,是不是弹出了这样的一个气泡确认框?那所以说咱们的这个结构啊,是没有问题的,那这个呢,老师呢。给它保存一下,稍微格式化一下。对吧,这格式化软件啊,应该是有点迟钝。
05:01
早点,那这个老师呢,把它呢,给它调的稍微好看一些。好吧,哎,调的稍微好看一些,对吧,这是它,但是呢,这块呢,要注意一件事,那这块呢,咱们写一下这块是什么,是不是气泡。哎,气泡确认框。哎,圈框,但是呢,这块呢,要注意一件事,你看啊。咱们可以看一下。那首先说,那假如你删除的是512T,那你这块应该有个提示什么提示,你确定要删除512T吗。啊,比如说你这个属性值,你得在这儿进行展示。那所以说这块呢,咱们就得写动态的。对吧,那给它加一个冒号,那这个title的相应的属性值啊,咱们得这么写了,对吧,啊就是确定。对吧,哎,写一下咱来个模板字符串。叫做确定。哎,确定删除,那应该是谁呀,是不是应该是这个属性值的名称。
06:02
那就是谁是不是肉肉是不是相应的属性值的value的name对吧?哎,来一个小问号。那咱们呢,可以看一下的啊,可以看一下的。老师呢,给他刷刷新,咱呢都从头看一下。对吧,哎,你要确定删除256T嘛,对吧,那么这块呢,一定要注意,那如果点击取消,那就是不删除,那如果点击确定,那你是不是真的在删除。那删除怎么删除啊,那咱们先看一下子。咱们还得盯住数据。咱们找一下咱们的这个相应的组件。那首先说这是属性,那这个呢是相应的属性值,那无非是在这个数组当中删除你选中的那个属性值就行了。但是呢,一定要注意一件事,什么事什么时候删除,是当你点击这个气泡确认框的这个确定按钮的时候才能删除。那所以说啊,咱们得找一下人家的文档,看一下这个确定,点击这个确定触发的是哪个事件。
07:07
那咱们呢,找一下它的相应的API,咱们应该找even事件。那这个事件呢,有一个叫什么叫做confirm事件,点击确认按钮时会触发,那咱们呢,去给咱们这个泡泡加上这个事件。对吧,那这个呢,咱给他来一个,那这块呢,来一个at con。那咱们呢,给他来一个相应的方法,比如叫做delete啊,Delete叫做什么呢?Delete at tr value。对吧,删除属性值。啊,那咱们呢,先给他写上这样的一个相应的回调,咱们先看一下这个回调有没有出发。对吧,那这一块呢,咱们呢,呃,这块是当时老师是给到注释上了是吧,这个呢,咱给它打开就行了。对吧,哎,这块给它打开相应的注释的地儿,还是给它注释上对吧?啊。
08:01
走。行,那这块呢,老师呢,把已经写过的函数啊,老师呢就给你折上了,省得看着他呀,闹心对不啊,这笔记代码一大堆,这老师给他折上。对吧,那咱们这块呢,还得接着写注释,那这块是什么,是不是气泡确认框,哎,气泡写一下气泡去。认哎框的,呃,确定。按钮的回调。对吧,哎,那咱们呢,先看一下子这个回调会不会触发,乐老师呢,给他弹个一一。对吧,那咱们呢,回到咱们的项目当中,咱们呢去看一下手机手机通讯手机对吧?哎,走,当老师一点击的时候,看下有没有触发。那你会发现啊,他根本没有触发,因为如果触发了会弹出什么呀,一一,那这是为什么呢。那这块呢,要注意一件事,咱们现在所用的饿了么UI的版本呢,是现在看到这个文档啊,是2.15.6的,看这啊是2.15.6的。
09:12
而咱们项目模板当中所用的饿了么UI,它的版本号是多少呢?是2.13.2。也就是说咱们现在使用的饿了么UIUI的版本呢,不是最新的版本,是老版本,那么老版本当中气泡确认框的这个确定按钮的事件叫做on。对吧,所以说这块呢,要注意是有版本问题的,那所以说这块你得写成什么,你得写成on con。这块呢要注意一下,那这回呢,咱们呢,再回首再看一下子对吧,哎,手机。手机通讯手机,那以及咱们比如说删除128,那你看啊是不是执行了对吧,那所以说这块呢,老师呢,也做一下咱们的笔记这块呢,要注意一件事就是最新,哎最新。
10:02
版本的饿了么UI,咱们现在看到的是2.15.6,而咱们目前模板。模板中的。版本号是二点一三点什么对吧,所以这块呢,一定要注意是有版本问题的,所以说这个事件呢,前面要得给我写一个啊,而且C是大写。那么当你一点击这个确定的时候,你要干什么呀。对吧,那你是要删除相应你选中的那个属性值,那说白了,那咱们呢,看一下,说白了就是从数组当中删除一个元素而已。对不?那比如说我删除的是256,对不?那当你一点击确定的时候,那你是不是要从这个数组当中删除索引值为二的这个元素。对不,那所以说啊,咱们呢,要把相应的这个属性值的索引值啊,要给您传过来,那所以说啊,咱们呢,把咱们的这个Dollar inex给它传进来。
11:04
到了index是什么?是每一个属性值的相应的索引值,012。那么当你一确定的时候,你要干什么?是不是从数组当中删除你选中的那个属性值对吧?这点at tr info.at tr y6list.less对不?那当然咱们得接收相应的索引值index。对吧,那第一个参数那是索引值,删除几个,删除一个对不?而这块儿呢,要注意咱们这个接,咱们这个操作是不需要发请求的,就是当前。哎,当前这个删除属性值的操作,哎,是不需要发请求的。那所以说回到咱们的项目当中,咱们再测试一下有没有OK手机手机通讯手机对吧,比如说我删除128T。
12:00
走,是不是真的没了?那所以说咱们完成了删除属性值的操作。
我来说两句