1 00:00:00,650 --> 00:00:04,810 In this section we're going to talk about one last little difference between GSX and HMO. 2 00:00:05,100 --> 00:00:09,660 This last little thing is probably the most important feature to understand about GSX because we're 3 00:00:09,660 --> 00:00:13,200 going to be working with this feature quite a bit throughout this course. 4 00:00:13,200 --> 00:00:17,650 So GSX can very easily reference javascript variables. 5 00:00:17,700 --> 00:00:23,830 Essentially that means we can take a javascript variable and easily printed up inside of our GSX block. 6 00:00:24,300 --> 00:00:29,400 Let's flip back over to our code editor and get a quick example of what this would look like. 7 00:00:29,400 --> 00:00:29,690 All right. 8 00:00:29,700 --> 00:00:35,130 So inside of my app function right here or my app component I'm going to create a new variable. 9 00:00:35,220 --> 00:00:40,400 They're going to call it something like button text and I'll give it the text of click me. 10 00:00:40,860 --> 00:00:42,400 Like so. 11 00:00:42,450 --> 00:00:48,840 So now if we want to we could refer to this button text variable inside of our button in place of just 12 00:00:48,840 --> 00:00:56,430 putting in the plain text of submit to do so I would delete that text of submit and then I'll put in 13 00:00:56,790 --> 00:01:03,630 a set of curly braces like so now the curly braces here are not indicating a javascript object. 14 00:01:03,750 --> 00:01:08,970 Instead the just the curly braces are indicating that I want to reference a javascript variable right 15 00:01:08,970 --> 00:01:15,290 here so I can then type out the name of the variable that I want to insert into this button. 16 00:01:16,020 --> 00:01:21,900 I can then save this file flip back over to my application at local hold three thousand and I'll see 17 00:01:21,900 --> 00:01:22,080 that. 18 00:01:22,080 --> 00:01:24,900 Now that button says Click me. 19 00:01:24,920 --> 00:01:30,800 So with this curly very syntax we can very easily reference different javascript variables inside of 20 00:01:30,800 --> 00:01:32,110 our GSX. 21 00:01:32,390 --> 00:01:37,460 We're not only limited to making very simple statements like this where we define a single variable 22 00:01:37,460 --> 00:01:39,720 at a time and then reference it inside. 23 00:01:39,950 --> 00:01:45,200 We could very easily do something a little bit more complicated for example maybe in front or right 24 00:01:45,210 --> 00:01:46,750 before my app component. 25 00:01:46,760 --> 00:01:54,470 I defined something like say function get button text and then anytime someone calls this function maybe 26 00:01:54,470 --> 00:01:58,000 I will return click on me. 27 00:01:59,750 --> 00:02:02,270 Then inside of my button tag right here. 28 00:02:02,330 --> 00:02:08,260 Rather than referring to button text I can delete that and call the function that we just created. 29 00:02:08,510 --> 00:02:15,290 So I'll say it button text like so make sure you get the parentheses on there so you actually invoke 30 00:02:15,290 --> 00:02:16,680 the function. 31 00:02:16,700 --> 00:02:23,020 The other thing it wants to do is clean up that variable that we're no longer using but in text Revier. 32 00:02:23,040 --> 00:02:25,660 All right let's save this and see how it goes. 33 00:02:26,030 --> 00:02:28,480 I'll flip back over and of course see now see. 34 00:02:28,520 --> 00:02:34,790 It's the button says Click on me as opposed to the Submit or click me that it said before. 35 00:02:34,810 --> 00:02:40,750 Now there's only a couple limitations around what type of variable we can reference inside of these 36 00:02:40,750 --> 00:02:43,550 GSX blocks using these curly braces. 37 00:02:43,720 --> 00:02:45,510 Let me give you a couple of quick examples. 38 00:02:45,520 --> 00:02:50,500 In the next video because this is a problem that you are very likely to run into at some point during 39 00:02:50,500 --> 00:02:51,910 your rehab act career. 40 00:02:52,000 --> 00:02:54,080 So quick pause and I'll see you in just a minute.