WEBVTT 00:00.350 --> 00:00.890 Okay guys. 00:00.890 --> 00:08.300 So initially I've mentioned that we might want to use partial templates as as we can see inside the 00:08.300 --> 00:14.300 list of the blog posts on the posts page, we've got this fragment. 00:15.230 --> 00:22.880 Its job is to display the titles of blog posts together with an excerpt of the content and links to 00:22.880 --> 00:24.110 the blog posts. 00:24.110 --> 00:31.850 So this fragment is identical to the same fragment on the home page. 00:32.000 --> 00:39.170 What we might want to do is to extract this into a partial template that we are going to render in a 00:39.170 --> 00:41.150 couple other templates. 00:41.480 --> 00:47.690 So let me grab this code and inside views create the folder for the partials. 00:50.210 --> 00:51.260 So it's a. 00:52.100 --> 00:54.590 So now we need to come up with some convention. 00:54.590 --> 00:57.950 I think we can start the names with the underscores. 00:57.950 --> 01:00.350 This means it is a partial. 01:00.530 --> 01:03.480 Let me call that just Posts. 01:05.460 --> 01:08.490 And this is our partial template. 01:08.760 --> 01:17.430 Now, I think we should jump to the view class and create some kind of a method to render the partial. 01:19.980 --> 01:28.470 Now inside the view class we immediately see the render template method, and I think that it wouldn't 01:28.470 --> 01:34.560 be a very bad idea to reuse it for rendering of partials. 01:35.820 --> 01:38.610 So it would be quite simple. 01:38.610 --> 01:50.070 We will just add a static method called partial that might accept the data and template as the arguments, 01:50.550 --> 01:55.470 initializing the data with an empty array and will return a string. 01:55.920 --> 01:59.520 So how we would like to use the render template is. 02:00.270 --> 02:11.110 We're gonna return the call to static render a template, but we're just going to assume that the template 02:11.110 --> 02:14.260 is inside partials folder. 02:14.950 --> 02:24.820 Then we pass the partial template name and the second parameter is the potential data. 02:26.410 --> 02:26.680 Okay. 02:26.710 --> 02:32.110 So let's jump to the home template. 02:33.370 --> 02:39.670 And now let's try to output something using Vue partial. 02:40.150 --> 02:42.550 The template name is posts. 02:42.550 --> 02:45.160 And we need to pass the data. 02:45.160 --> 02:46.600 And we have it right here. 02:46.600 --> 02:48.670 This would be under sorry. 02:48.700 --> 02:51.070 That key should be posts. 02:52.000 --> 02:54.760 And we have the posts variable here. 02:55.810 --> 02:57.820 So I think this should work. 02:57.820 --> 02:59.740 Now there is one problem though. 02:59.770 --> 03:03.340 If we use a class we need to add a use statement for it. 03:05.500 --> 03:12.640 So we need to add something like this at the top of every stem of every template where we use this partial. 03:12.790 --> 03:14.950 That's not ideal. 03:14.980 --> 03:17.050 We're gonna fix this later on. 03:17.050 --> 03:19.660 For now, let's just see if it works. 03:19.750 --> 03:30.280 So the home template and this one, let's also make sure we import the view class in here. 03:30.520 --> 03:32.650 And let's try that out. 03:34.180 --> 03:36.130 So let's move to the browser. 03:36.130 --> 03:39.700 And it seems that both pages are fine. 03:39.700 --> 03:41.560 Let me also search for something. 03:41.590 --> 03:41.830 Okay. 03:41.860 --> 03:43.150 Everything is fine. 03:44.140 --> 03:50.410 So now let's do something about having to import this class every single time. 03:50.440 --> 03:56.290 So my suggestion is to create a file with helper functions. 03:57.010 --> 03:58.480 So how can we do that. 03:58.510 --> 04:00.460 Well it's up to us. 04:00.460 --> 04:02.500 Where do we put this file. 04:02.650 --> 04:05.470 It might be at the root directory. 04:05.470 --> 04:08.290 Let's call it helpers PHP. 04:10.000 --> 04:18.190 So we need to add a use statement for the core view, and our helper function will be called partial. 04:19.480 --> 04:21.310 It will be globally available. 04:21.310 --> 04:25.690 Thus we won't have to add a use statement for a class. 04:26.350 --> 04:32.980 So that's a template and array data that is initialized as an empty array. 04:33.010 --> 04:34.960 It returns the string. 04:35.050 --> 04:44.440 And all it does is it does view partial passing the template and the data. 04:44.470 --> 04:52.180 Now what's better is we can first make sure that such function doesn't exist. 04:53.380 --> 04:56.410 We can use PHP function exists for that. 04:56.410 --> 05:03.190 So if the partial function was already defined in the global scope, we don't define it. 05:03.190 --> 05:06.460 If it wasn't, we can safely define it. 05:07.030 --> 05:10.750 That's not everything we need to make sure this is available. 05:10.750 --> 05:19.130 It only makes sense to make this helpers available inside the index.php, not inside the bootstrap, 05:19.130 --> 05:24.920 because it is specific to the web part of our project. 05:26.810 --> 05:35.930 Maybe we can add the require ones in here and just make sure we've got helpers. 05:36.290 --> 05:36.800 PHP. 05:37.850 --> 05:41.060 Now let's jump to our templates. 05:42.740 --> 05:49.400 So this one first let's just call the partial function removing the use statement. 05:51.650 --> 05:55.010 And the template for the post. 05:55.250 --> 06:00.770 And also call the partial function removing the use statement. 06:01.670 --> 06:03.110 Everything still works. 06:03.110 --> 06:05.030 So we were fine. 06:05.060 --> 06:09.380 Okay so this is how can you create and use partial templates? 06:09.380 --> 06:14.090 I think it's a great feature and makes our code much more usable.