- 00:00:01 welcome to a new video about view chairs
- 00:00:04 – in this video we're going to have a
- 00:00:06 look at how we can transform the data we
- 00:00:08 output in our template directly in the
- 00:00:12 template with filters for example if you
- 00:00:15 have some string which is all lowercase
- 00:00:17 and you want to output it as uppercase
- 00:00:20 we're going to build this example in
- 00:00:22 this video so I am back here in jsfiddle
- 00:00:25 a tiny little editor in the web you can
- 00:00:29 use for simple projects or for playing
- 00:00:31 around with JavaScript HTML and CSS only
- 00:00:33 projects and all I did here is sort of a
- 00:00:36 basic view chairs to set up where I
- 00:00:38 import view chairs here work from the
- 00:00:40 CDN and then my app Dave here which I
- 00:00:44 take control over with my view instance
- 00:00:46 down there and then I get a title but oh
- 00:00:48 the tile is all lowercase now what if I
- 00:00:52 wanted to output it uppercase well
- 00:00:55 option number one we already learned
- 00:00:58 about computer properties if you
- 00:01:00 followed all the view videos on this
- 00:01:02 channel I do have one about computed
- 00:01:04 properties there we could set up a
- 00:01:06 computed property which the end of
- 00:01:08 course is a function as you learned
- 00:01:09 there and we could name it that title
- 00:01:12 just to have a different name and as I
- 00:01:15 said this is a function and in their
- 00:01:18 return this title to uppercase to
- 00:01:22 uppercase is a built-in JavaScript
- 00:01:24 function we have available in JavaScript
- 00:01:26 and then output that title here in the
- 00:01:28 template hit ctrl enter we see hello
- 00:01:30 world in all uppercase and that's a
- 00:01:32 perfectly valid method this is using a
- 00:01:35 computed property and taking advantage
- 00:01:36 of the fact that you chess will
- 00:01:38 automatically recalculate this whenever
- 00:01:40 we change the title but there's also a
- 00:01:43 different way of doing this because
- 00:01:45 imagine we do have a couple of strings
- 00:01:47 which are lower case in which we
- 00:01:49 eventually want to turn into upper case
- 00:01:51 strings well the problem we do have of
- 00:01:53 this solutions that we would have to
- 00:01:54 create a computer property for each our
- 00:01:57 data field we want to transform so if we
- 00:01:59 not only had the title but also the
- 00:02:02 message here which is something well
- 00:02:04 then we would have to create and you
- 00:02:05 compute a property for this message and
- 00:02:08 that quickly is not something you want
- 00:02:10 to do so instead we can use a filter
- 00:02:13 filters are simply little helpers you
- 00:02:16 can use in view chess and you would have
- 00:02:18 to create this on your own because there
- 00:02:20 is no built-in filter there's only the
- 00:02:22 capability to build your own filters now
- 00:02:25 how do you build a filter well you do it
- 00:02:27 by accessing the global view object the
- 00:02:30 one we're instantiating here you don't
- 00:02:32 have to instantiate it it also has some
- 00:02:34 static functions if you will and there
- 00:02:37 we can access filter now this allows us
- 00:02:40 to set up a global filter which means
- 00:02:42 one which is application wide available
- 00:02:45 the alternative would be to set up
- 00:02:48 filters object here in the view instance
- 00:02:51 to create local filters which are only
- 00:02:54 available in this view instance now it
- 00:02:57 doesn't matter in this example here but
- 00:02:59 it'll start with a global one and I'll
- 00:03:01 name it upper case this is the name we
- 00:03:04 will later on use to work with it and
- 00:03:06 this method then also takes a second
- 00:03:09 function or argument I should say which
- 00:03:11 is a function this function will be
- 00:03:13 executed by vue.js whenever this filter
- 00:03:16 is applied to something and we will
- 00:03:18 apply it in a second this function will
- 00:03:20 automatically receive one input one
- 00:03:23 argument and that's the value view j/s
- 00:03:26 will pass this value to this function
- 00:03:28 automatically and this of course will be
- 00:03:31 the value on which we apply this filter
- 00:03:33 later on so any what we then have to do
- 00:03:36 is we have to return the filtered which
- 00:03:39 means transformed value and there I
- 00:03:41 could therefore simply return value to
- 00:03:44 upper case the same as down there in the
- 00:03:48 computed property but now in this filter
- 00:03:51 now what's the idea behind this filter
- 00:03:53 what's the advantage well since we
- 00:03:56 created it here gave it a name of upper
- 00:03:58 case I can go into my template and pick
- 00:04:02 the original title here and simply add
- 00:04:05 the filter by adding a pipe symbol and
- 00:04:07 then the name of the filter upper case
- 00:04:09 the name we picked here without the
- 00:04:11 quotation marks though if I now hit
- 00:04:14 control enter again well we see the same
- 00:04:16 result but now not using the computed
- 00:04:18 property but instead defaulter now only
- 00:04:21 to highlight this in the local setup
- 00:04:24 here we can also add filters here by add
- 00:04:27 them with the name first so if you want
- 00:04:30 to create a lowercase folder we would
- 00:04:32 give this property a name of lowercase
- 00:04:33 and that would also be a function which
- 00:04:36 gets the value just like in the filter
- 00:04:38 above which we defined globally and then
- 00:04:41 we could then return value to lowercase
- 00:04:44 never built in JavaScript function now
- 00:04:47 what this allows me is to even chain
- 00:04:49 this to the other folder by adding an
- 00:04:51 average height and now lowercase
- 00:04:53 referring to that folder we register
- 00:04:55 here locally which is therefore only
- 00:04:57 available in its instance and now that
- 00:05:00 control enter well it's lower case
- 00:05:02 because what happens here is we're
- 00:05:04 chaining filters which means we're first
- 00:05:07 executing the upper case folder on title
- 00:05:09 and then we're executing lower case
- 00:05:11 folder on the result of upper case on
- 00:05:14 title so on this part and this gives us
- 00:05:17 this newly filtered value and the great
- 00:05:20 advantage of folders of course is that
- 00:05:22 we can now apply this to any value we
- 00:05:25 want to output so also to the message
- 00:05:27 which I could not also transform to
- 00:05:29 uppercase like this hit ctrl enter and
- 00:05:31 here it is something these are filters
- 00:05:35 in view chairs again there are no
- 00:05:37 built-in ones but you're totally free
- 00:05:40 and imagining what you want to build
- 00:05:42 with filters and you do build them like
- 00:05:44 this evilly finding globally here with
- 00:05:47 view filter name and then the function
- 00:05:50 which holds the logic or globally in the
- 00:05:53 filters object which holds key value
- 00:05:55 pairs where the key is the name of the
- 00:05:57 filter and the value is the function one
- 00:05:59 important note though you always want to
- 00:06:02 use a computed property if you can now
- 00:06:05 here it's clearly impractical because
- 00:06:06 you might have multiple messages or
- 00:06:08 strings you want to transform but if it
- 00:06:10 is less impractical use a computer
- 00:06:13 property because computer properties
- 00:06:14 offer you better performance because
- 00:06:17 vue.js is able to analyze on what this
- 00:06:20 computer property depends and whether
- 00:06:22 therefore needs to recalculate it well
- 00:06:25 of that I hope the basics about folders
- 00:06:27 are set and you are now in the position
- 00:06:29 to transform your output in the way you
- 00:06:32 want to transform it
