Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,820 --> 00:00:04,390
Next we refactor we're going to do is four on option select.
2
00:00:04,480 --> 00:00:10,120
So in other words we're going to pull out all the logic that decides what function to run whenever user
3
00:00:10,150 --> 00:00:11,820
clicks on an option.
4
00:00:11,820 --> 00:00:17,950
So to do so I'm going to go back over to auto complete J.S. and we're going to find inside of here the
5
00:00:17,980 --> 00:00:21,550
code responsible for doing something whenever a user clicks on an option.
6
00:00:21,560 --> 00:00:26,500
So I to scroll down a little bit inside of an input inside of there is our form of loop.
7
00:00:26,500 --> 00:00:32,620
Once again and then inside of there after we create our option we attach that event listener to this
8
00:00:32,620 --> 00:00:33,040
right here.
9
00:00:33,040 --> 00:00:38,480
This function is what's going to run after user clicks on the individual option.
10
00:00:38,490 --> 00:00:41,210
Now it's something to be aware of inside of here.
11
00:00:41,450 --> 00:00:44,780
The first line like removing that is active class.
12
00:00:44,850 --> 00:00:49,890
That's something that we want to have happen regardless of what goes on in other words no matter what.
13
00:00:49,890 --> 00:00:53,820
Whenever user clicks on an option we always want to call it closed the dropdown.
14
00:00:54,150 --> 00:00:57,290
So we don't want to just kind of extract that function right there somewhere else.
15
00:00:57,300 --> 00:01:00,500
Instead we only want to extract some parts of it.
16
00:01:00,530 --> 00:01:05,270
I think one part that we very definitely like probably very clearly want to extract to be on movie select
17
00:01:05,270 --> 00:01:10,550
right here is that is what actually decides what really happens or what goes on whenever a user clicks
18
00:01:10,550 --> 00:01:16,240
on the button but the line that is kind of questionable about whether we need to extract or not is where
19
00:01:16,240 --> 00:01:21,700
we set the inputs value with the movie title half of this line.
20
00:01:21,700 --> 00:01:28,150
In other words like that half right there is very much appropriate for keeping inside of this autocomplete
21
00:01:28,150 --> 00:01:32,530
file because it is related to how the autocomplete works and we probably want it to work the same way
22
00:01:32,890 --> 00:01:38,080
regardless of whether we're showing movies or recipes or blog post or whatever else but the source of
23
00:01:38,080 --> 00:01:38,470
it.
24
00:01:38,500 --> 00:01:44,680
In other words movie title that part of that it line or that expression is very much customized for
25
00:01:44,680 --> 00:01:46,600
the type of resource we're working with.
26
00:01:46,600 --> 00:01:51,940
If we weren't working with movies then instead this line should probably be something like log name
27
00:01:51,970 --> 00:01:58,870
or something like that or recipe name but in every scenario we definitely get to take whatever that
28
00:01:58,870 --> 00:02:02,080
value is and throw it back into the input value.
29
00:02:02,110 --> 00:02:05,560
So this is kind of a more challenging refactor and we're going to have to think about exactly how to
30
00:02:05,560 --> 00:02:07,790
handle that right now.
31
00:02:07,810 --> 00:02:13,640
It's probably pretty obvious that we definitely want to extract the callback right there so at a very
32
00:02:13,640 --> 00:02:19,490
minimum let's make sure that we create and pass in some function called like on option select on our
33
00:02:19,490 --> 00:02:26,130
config object and inside there we'll make sure that we call on movie select to back inside of index
34
00:02:26,130 --> 00:02:34,750
dot us years create autocomplete going to pass in a another function called on option select I'm going
35
00:02:34,750 --> 00:02:39,490
to expect that this is going to be called with whatever object that the user just clicked on and I'm
36
00:02:39,490 --> 00:02:44,600
gonna call it movie then inside of here we can do the same exact thing that we did before where we call
37
00:02:44,660 --> 00:02:51,760
on movie select so call on movie select and pass through the movie
38
00:02:54,930 --> 00:03:01,740
then we can go back over to our complete J.S. at the very top once again we can d structure off that
39
00:03:01,740 --> 00:03:09,530
new function which we called on option select and then back down at the event listener that we're just
40
00:03:09,530 --> 00:03:15,770
looking at instead of calling on maybe select right there directly instead it will be on option select
41
00:03:16,800 --> 00:03:20,000
and this might seem like a very insignificant change right here.
42
00:03:20,040 --> 00:03:20,310
Right.
43
00:03:20,310 --> 00:03:23,730
Like what we just change the name of the dropdown or the callback function.
44
00:03:23,730 --> 00:03:24,960
Who cares.
45
00:03:24,960 --> 00:03:29,970
Again the entire point here is that if we had some scenario where we wanted to call a different function
46
00:03:29,970 --> 00:03:34,380
right there if we were using our autocomplete on another application we would have had to open up the
47
00:03:34,380 --> 00:03:39,830
source code for our autocomplete and change that line of code which hundred percent not good.
48
00:03:39,840 --> 00:03:43,690
We don't want to have to edit the source code of autocomplete J.S..
49
00:03:43,860 --> 00:03:49,830
So in doing this change we've extracted deciding what to do when a user clicks on something into this
50
00:03:49,830 --> 00:03:55,440
configuration option over in index dot J.S. which is going to contain all of our application specific
51
00:03:55,440 --> 00:03:56,400
code.
52
00:03:56,400 --> 00:03:59,540
So I know this seems like a smaller change but it still is pretty meaningful.
53
00:04:00,640 --> 00:04:00,860
Okay.
54
00:04:00,890 --> 00:04:04,670
So now the other thing we need to be aware of that we discussed this line right here.
55
00:04:04,670 --> 00:04:10,310
So again the left hand side it needs to happen for every instance in which we use not complete but the
56
00:04:10,310 --> 00:04:16,560
source of information is really well that's kind of application specific.
57
00:04:16,590 --> 00:04:21,300
So I think that we need to pass in a another helper function to our config object.
58
00:04:21,480 --> 00:04:27,330
And I think that we need to use that to decide exactly what value to assign when a user clicks on something
59
00:04:28,470 --> 00:04:33,580
so back inside of index dot J.S. I'm gonna add in another helper function.
60
00:04:33,580 --> 00:04:41,020
I'm going to call it input value the goal of input value is going to be to take a movie and after a
61
00:04:41,020 --> 00:04:47,710
user clicks on the option we're going to call input value with the movie and we're going to return whatever
62
00:04:47,710 --> 00:04:50,030
value it should show up inside of the input.
63
00:04:50,740 --> 00:04:53,830
So I'm going to return movie that title.
64
00:04:53,860 --> 00:04:59,080
So this is how we're going to extract the logic out of autocomplete J.S. it's not to use that will go
65
00:04:59,080 --> 00:05:06,750
back over to autocomplete J S again rather than directly referencing movie title I will instead call
66
00:05:07,680 --> 00:05:16,290
input value with the movie up inside of our config object up here at the very top of the file.
67
00:05:16,290 --> 00:05:24,310
I'll make sure that I also extract input value from the config.
68
00:05:24,340 --> 00:05:27,190
All right now we'll not see on repeat really quickly here.
69
00:05:27,380 --> 00:05:32,840
We still have many references to movie inside this file and so it might seem like we're making no progress
70
00:05:32,870 --> 00:05:35,170
in actually making this thing reusable again.
71
00:05:35,180 --> 00:05:39,380
We are going to eventually come back through and replace the term movie with something else that will
72
00:05:39,380 --> 00:05:41,700
be a little bit more consistent.
73
00:05:41,750 --> 00:05:48,980
So we got one more step forward let's do another test or refresh a search for Avengers a click and it
74
00:05:48,980 --> 00:05:52,630
looks like the input value still gets updated correctly.
75
00:05:52,770 --> 00:05:53,820
That's very good.
76
00:05:53,870 --> 00:05:57,440
Let's not take one more pause and try to finish up this refactor in the next video.8746
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.