19-尚硅谷-尚优选PC端项目-右侧商品上半部分详情介绍数据动态渲染

在上次课程当中啊，我们已经完成了商品详情部分的结构布局。本次课程咱们需要将这些数据让它进行动态渲染。好了，怎么啊，需要来找到怎么对应的JS文件，由于呢，它也是一个固定的功能，所以呢，怎么啊，需要给它单独列出来一个函数。把之前写好的咱们都给它收起来，在底下的位置呢，单纯写一行注释，这个叫做商品详情数据的动态渲染。来上一个function。起一个名称叫做right top date，诶非常接地气啊，咱们右侧上半部分的一个数据好了，函数呢，咱们定义好了之后啊，我就需要来进行一个调用。写完函数调用，我就必须得让他想一想，咱们到底如何来实现。

既然当前这段数据它是一个灵活性质的数据，根据每一个商品它实际的一个内容来进行表达，但是我问一下大家，它整体的结构变吗？第一行是不是永远这个位置装的是咱们商品的标题部分。第二行永远装的是咱们商品的。介绍对吧，诶，然后中间的这个部分呢，装的是咱们关于价格呀，促销呀，以及评价它的数量，后面两行像。支持，以及咱们的配送的位置，它其实都是一个固定的。啊，这两行都是固定的，也就是它的数据是不一样，但是结构不会发生任何的变化。那我就何不找一找咱们对应在当前整体这个位置的div，然后把里边所有的结构拿出来。

再获取一下对应的数据。把相应的数据按图索骥给他干什么？重新填进来是不是就可以了呢？哎，来怎么记录一下咱们的思路。第一步，查找。Top元素。诶，因为这个位置啊，原来咱们在定义它的结构的时候往回翻，这是不是就叫做right top对吗？诶，我需要一会儿来找到这个元素啊，找到这个元素之后，第二步我是不是还得找到相应的数据呢？在date.js文件里边。Pass折起来，Images sc折起来。第三段就是咱们的goods detail。

在里边像一直到title啊，还有咱们的价格呀，还有支持啊，还有咱们的这个地点啊等等，这些都是咱们商品详情上半部分所需要的数据。好了在这啊，咱们再加上第二个查找谁呢？date.js文件当中的。Good date。里边的谷子里，诶需要查找数据，然后。元素也有了，对应的数据也有了，那我要怎么着啊？重新建立一个字符串变量。变量，诶，因为你看一下咱们原来的布局啊，就从H31直到这个位置的div里边的内容，我是不是要重新发生替换。

对吗？诶，那么咱们当前write top里边，从我现在所选中的这个位置的所有内容，它的音H分苗是不是要进行重绘好。那它重绘是不是就叫写入一个字符串啊，对吧？诶，所以我得需要来建立一个字符串变量，将什么原来的这个布局结构诶粘进来。诶，贴进来。将所对应的数据，诶不是这个锁啊，将所对应的数据怎么着了，诶放在对应的位置上。重新渲染谁呀？Write top元素，诶，重新渲染元素好了，我要把当前咱们之前写的这个文件呢运行起来，在对应的位置上面点击右键找到right top。

啊，这个位置咱们应该是没有样式没有关系，往上倒一层啊，咱们自己补一下。在这前面加上一个变量，叫做write top等于document，点上the letter。然后里边在写的时候啊，千万不要忘了没完呢啊，这还得再加一个什么，诶，Class right top点好了，元素写好了之后，一样的道理，需要获取一下，诶不要巴拉巴拉的都写完了之后，你发现这也不是那也不是，你的心态就崩了啊来刷新发现此时咱们所要的这个结构元素是不是拿到了，对吗？嗯。拿到了之后，咱们刚分析了第二步干啥找数据。来把这个稍微加一点注释啊，是咱们说到的第一个啊，查找元素。

嗯，查找元素第二个。是咱们说到的查找数据。默认一个goods detail等于。Good date点就detail a cancel.log打印一下，看数据有没有拿到。拿到了没？诶拿到了啊，咱们对应的很明显它是一个对象。对吧，是一个这个带有兼职类啊，兼职对这样的一个对象啊，兼职对这样的一个对象，那么有兼职队的对象，那我就按照对象点键名，是不是就应该拿到对应的间值。对吧，比如说我现在这个对象啊，它叫做这个good detail，那我点上address，是不是就应该拿到广东省深圳市宝安区这样的一个数据，然后再把它贴到对应的位置上，这就OK啦。

对吗？诶，再比如说我的这个title后面是不是一大长串的这个标题。我只需要把这行数据贴到哪里，贴到咱们刚才所看到的那个标签里边，重新给上去不就得了吗？哎，这个道理是没有问题的啊，其他的也是一样的，嗯。来，在这里数据也有了，元素也有了，第三步咱们要干啥呀？是要创建一个字符串变量。一个S等于好。咱们啊，需要稍微停顿一下，想一想。我既然想要把这里边H3标签里边的值进行替换，P标签里边的值进行替换。那我挨个再去，如果放到一个双引号字符串里边，挨个替换数据。

当然可以是可以，是不是还得要使用字符串拼接的方法？来给大家举一个例子，我以H3为例啊，以H3为例，我贴过来我呀想把对应这一条数据给它换了，怎么换？是不是得要让它双引号加加中间拼接对象点上什么title。当你说老师这不可以实现吗？是没问题，但是你别忘了，当你这个结构比较多，相对较复杂的时候，那么你这种写法容不容易报错呢？你说老师这种应该属于一个高发的一个频次的错误了啊，也是属于这种初学的小伙伴比较头疼的一个问题，好在这既然你头疼诶，我就给你一个解决你头疼的办法，大家想一想啊，这个字符串。

它除了有双引号的字符串。和单引号的字符串。是不是还有一个咱们ES6当中接触到的模板字符串啊。还记不记得他呀？诶，当时你一定有很有印象，模板字符串专门就帮助你解决了什么字符串拼接的一个头疼的问题。来吧，我呀，把刚才咱们试验的这一段代码给你删掉，把原先咱们所写的这个布局从H31直到div的class，啊，这个address整体剪切出来，留一个空空的right top来粘过来。这个位置呢，咱们就不要写双引号了啊，写两个反引号来粘进来。

粘进来之后你发现了。它里边啊，也能按照咱们之前的一个结构来进行显示换行对吗？诶要不然如果我要是给了一个之前双引号那样的字符串，咱们的换行是不是也有问题啊，还得自己手动换行对吗？很头疼啊很头疼，好了，那咱们现在模板字符串有了之后，那我就在想，那它里边的数据咋替换呢？模板字符串当中替换数据。Dollar符号大括号写上你的变量。来吧，我把对应第一行删掉Dollar符号大括号写成什么呀？写成good detail.title。A goods detail点抬来，紧接着P标签Dollar符号goods detail点上，怎么来观察？

谁呀，是不是recommend对吗？诶他的介绍啊。紧接着咱们再看一下还有什么5299，诶这个位置也要替换啊，Dollar符号，咱们的good detail，点上一个price价格。再来加架构，嗯，它是一个对象啊在这。Dollar符号，它点上什么呢？T，诶，我没记错的话，应该是typeb啊，OK，然后满999里边另加20，在这儿把这句话删掉。Dollar符号，咱们这个对象点上content内容。对吧，嗯，Support是咱们的支持在这个位置。Goods detail，点上support。还有address。

以及最后的评价。好了，那么现在这组数据写好了之后，原来的right top的元素是不是被我给拿走了，清空了对吗？诶，现在里边啥也没有了啊，我把数据都填好了之后，诶，这个大括号看一下是在哪的啊，诶是这个位置啊，没有问题，嗯，咱们整个的字符串写好了之后怎么看，最后还需要干啥？将咱们对应写好的这个变量重新渲染right top元素，诶，这个变量怎么还没有用上呢啊。写上第四步。重新渲染元素。嗯，重新渲染它啊。Right top点上inner秒等于S，一定要记得是inner h秒，因为只有它才能识别诶对应的标签啊，Inner task的话只能识别纯文本，好了，那么在这里啊，咱们重新来运行一下当前页面看一下，嗯，它没有，那么咱们看看是不是哪报错了呀。

他说，哦，这个地方少了一个位置啊，来，切回来。少了个什么谷子底太有对吧，嗯，来点上啊。OK，那么现在这个小问题咱们解决了之后呢，当前这里边的数据已经变成动态的数据，老师你说这看着跟刚才也没有不一样啊，诶你检测的方法很容易啊，来我把这给你拉过来，我就动一动这里边的数据稍微改一下，你看你是不是改完了之后页面当中有变化，来我在这儿写上999，页面当中是不是立刻就会有变化。

也就是说数据变了会影直接影响到你的视图页面，诶，我把这个位置给你还原啊，好，那么以上啊，就是咱们要实现的详情部分数据动态渲染的功能。其实它的整体啊，并不是很难，因为咱们写到现在大家也发现了，无外乎就是获取元素，获取数据，然后如果数据是多条，我需要便利，如果数据是对象单纯，我就可以直接拿来进行数据的替换，替换完了之后，你一定要想办法把你替换之后的数据怎么着啊，重新渲染回咱们的盗墓元素对象。好了，这节课呢，咱们就把数据动态渲染功能完成了。