- 00:00:01 welcome to the amazing world of view Jas
- 00:00:04 in this video I want to have a look at
- 00:00:07 how we can conditionally output some
- 00:00:10 content in our template in our Dom so
- 00:00:13 that we don't add or show a certain
- 00:00:15 let's say HTML element some text all the
- 00:00:18 time but only after certain condition is
- 00:00:20 met we'll also have a look at how we may
- 00:00:23 render lists to the Dom so how we could
- 00:00:26 render the items in an array to a list
- 00:00:29 in our web page let's dive into this in
- 00:00:32 this video I'm starting with a nice
- 00:00:36 little application here on J's file
- 00:00:38 again with the very very default so that
- 00:00:41 you can use for a view chess application
- 00:00:44 I get my app Dave here and in this app
- 00:00:47 Dave which is controlled by this view
- 00:00:49 instance down here of course I get a
- 00:00:51 button which allows me to well click it
- 00:00:54 and say show or hide something though
- 00:00:56 we're not executing any code right now
- 00:00:58 if you have a look at the quotation
- 00:01:00 marks of this Veon click directive here
- 00:01:03 and then I have two paragraphs which I
- 00:01:06 probably telling by their captions one
- 00:01:09 is show and hide conditionally I also
- 00:01:11 have a great horizontal line here which
- 00:01:13 will become very important later so
- 00:01:16 let's start by conditionally showing or
- 00:01:17 hiding this let's start with this first
- 00:01:20 paragraph I don't want to show this all
- 00:01:23 the time thankfully I have this nice
- 00:01:25 show property which is set to true
- 00:01:27 initially in my data object now what if
- 00:01:31 I wanted to use this show property as an
- 00:01:34 indicator if this first paragraph should
- 00:01:37 be visible or not well we can add a
- 00:01:40 directive to dispara graph again a
- 00:01:42 directive is an instruction view chess
- 00:01:44 will find in its template and it will
- 00:01:47 know what to do if it knows this
- 00:01:49 instruction well we're going to use a
- 00:01:52 directive which ships with view chess so
- 00:01:55 it will know what to do the name of the
- 00:01:58 directive is if so the name or the code
- 00:02:01 we have to use here is V if V – to let
- 00:02:05 view chairs know hey that is something
- 00:02:08 that concerns me and an AFS T directive
- 00:02:10 named all directives in view chairs look
- 00:02:12 like this use a V
- 00:02:14 – and then well the real name of this
- 00:02:17 directive so we if and we if then also
- 00:02:21 takes a value which we pass with equal
- 00:02:24 sign and then quotation marks and the
- 00:02:26 value here is now the well condition
- 00:02:31 which should determine whether we want
- 00:02:33 to show something here or not so here
- 00:02:36 I'm going to use my show property as
- 00:02:39 this condition because it's true or
- 00:02:41 false and that is what VF expects it
- 00:02:44 expects you get true or false to know
- 00:02:47 whether it should attach the element on
- 00:02:49 which it sits and all child elements to
- 00:02:51 the Dom or not that's also important we
- 00:02:54 have attaches and detaches it's not
- 00:02:57 hiding and showing it's not changing
- 00:02:59 your transparency it's really removing
- 00:03:02 it from the Dom or adding it to it
- 00:03:04 nothing in between so here with we have
- 00:03:08 show I'm now telling view chairs only
- 00:03:10 attach this paragraph and of course also
- 00:03:12 text inside the paragraph if show is
- 00:03:15 true which it is initially which is why
- 00:03:17 if I hit ctrl enter here I still see it
- 00:03:19 now in show/hide I can now change the
- 00:03:23 value of show and I want to set it to
- 00:03:25 whatever show is not right now so to
- 00:03:27 toggle between the two states so I'm
- 00:03:29 going to set it to not show to really
- 00:03:31 set it to false if it was true and to
- 00:03:34 set it to true if it was false so if we
- 00:03:37 now hit control enter again we see it
- 00:03:39 because initially it's true but if I hit
- 00:03:41 the button watch this part of our page
- 00:03:44 it disappeared because as I said it was
- 00:03:48 removed now interesting thing if we
- 00:03:50 inspect this part off the Dom here we
- 00:03:54 see am i visible and we see the button
- 00:03:56 but we see nothing in between but this
- 00:03:58 empty comment here so it really was
- 00:04:00 removed from the Dom if I click the
- 00:04:02 button again you see it's back there so
- 00:04:05 it's really added and removed as I said
- 00:04:08 before so this is how VF works and with
- 00:04:12 VF we also get V else we else can be
- 00:04:15 placed on an adjacent element to dyf
- 00:04:19 element here as long as it's the same
- 00:04:21 element so if we use VF on a paragraph
- 00:04:23 here we have to have an adjacent
- 00:04:25 paragraph
- 00:04:26 you can place Vee else now this means we
- 00:04:29 else is now only displayed if show is
- 00:04:32 false so if I click the button we see a
- 00:04:35 my wearable if I click it again we only
- 00:04:37 see M part-time visible this is how we
- 00:04:39 can use VF and we asked conditionally
- 00:04:42 show parts on our screen also important
- 00:04:45 besides we if we also get V show we
- 00:04:50 showed also works the same as we have
- 00:04:53 generally here we can say hooray I'm
- 00:04:58 here but the important thing is if I hit
- 00:05:02 ctrl enter it looks like it works the
- 00:05:06 same as we have right it's removed
- 00:05:08 whenever the with part is removed
- 00:05:10 however let's inspector to see the
- 00:05:12 difference here is our hooray I'm here
- 00:05:15 paragraph if I click show/hide you will
- 00:05:18 notice it's still there it's not removed
- 00:05:21 instead it's display is set to non so
- 00:05:24 this is the important difference we show
- 00:05:26 doesn't actually remove it from the Dom
- 00:05:29 it only changes the display to non so
- 00:05:32 it's no longer a player just played here
- 00:05:34 the important implication of course is
- 00:05:37 that removing it might be better
- 00:05:40 performance wise because it's really
- 00:05:42 gone it doesn't have to be rendered even
- 00:05:44 though you don't see it on the other end
- 00:05:46 you might have reasons why you want to
- 00:05:48 keep it around so you got both
- 00:05:49 possibilities with VF and we show and
- 00:05:52 with that you should have all the
- 00:05:54 flexibility you need now that were
- 00:05:57 conditionals let's now have a look at
- 00:05:59 lists so how can we output a list like
- 00:06:02 oh we got one year like this persons
- 00:06:04 list so let's say here below this
- 00:06:06 horizontal line that is why it's so
- 00:06:08 important I went out for the unordered
- 00:06:10 list and in this unordered list I went
- 00:06:13 out put let's say the names of my
- 00:06:15 persons now of course I could add a list
- 00:06:17 item here and I could access persons the
- 00:06:20 first element of course and then name
- 00:06:23 property like this now variate
- 00:06:25 control-enter we indeed see max here but
- 00:06:28 that's not really super convenient and
- 00:06:30 it's not reactive at all if we change
- 00:06:33 this list somewhere in our application
- 00:06:35 well that will not really get updated
- 00:06:37 where
- 00:06:38 not really able to dynamically add
- 00:06:41 multiple list items depending on the
- 00:06:43 length of the list we also have to or we
- 00:06:45 right now all have them have to code
- 00:06:48 them manually so that's not super
- 00:06:50 convenient instead we can use a number
- 00:06:53 directed so let me remove this code in
- 00:06:55 here and only list item I'm going to
- 00:06:58 place another directive which is called
- 00:07:00 v4
- 00:07:01 this also takes some value and we if we
- 00:07:05 told view chess the condition on whether
- 00:07:08 it should attach something well with v4
- 00:07:11 we tell view chairs that it should loop
- 00:07:14 through something so in the quotation
- 00:07:17 marks here we're writing the loop logic
- 00:07:19 and that would be that we want to loop
- 00:07:22 through all the persons so first I'm
- 00:07:24 going to choose a name for the variable
- 00:07:26 view chairs we'll use for each item in
- 00:07:29 this loop here and this is totally up to
- 00:07:32 you I'm going to name it person since we
- 00:07:35 do have a person yet but again this is
- 00:07:37 freely choose abble then we say in
- 00:07:40 persons so this is the syntax you may
- 00:07:43 know in your JavaScript loops so with
- 00:07:47 that I can now simply output person name
- 00:07:50 here I don't have to specify the index
- 00:07:52 because prison will change for each loop
- 00:07:54 iteration and if I now add control-enter
- 00:07:57 we see all three persons output there
- 00:08:00 because with v4 this list item element
- 00:08:03 is recreated as often as needed and so
- 00:08:05 is the text which is output free string
- 00:08:07 interpolation here and that is how we
- 00:08:09 can use a list or how we can render a
- 00:08:12 list with the four important side note
- 00:08:15 you can also get ex access to the
- 00:08:17 current index by simply enclosing person
- 00:08:21 in parentheses and adding a second kind
- 00:08:23 of argument here the argument is also
- 00:08:26 freely nameable by you I'm going to name
- 00:08:29 it index and this allows me to now also
- 00:08:32 output the index here which is reset for
- 00:08:35 each iteration so this starts at 0 of
- 00:08:38 course for the first element and then
- 00:08:40 goes up to 2 for the last element this
- 00:08:42 is the alternative syntax you can use if
- 00:08:45 you not only need access to the specific
- 00:08:47 element at the current iteration or at
- 00:08:50 the current a point of
- 00:08:52 time but also to the index of that
- 00:08:54 iteration we can get access to both with
- 00:08:57 that we had a detailed look at how you
- 00:08:59 can conditionally output data and how
- 00:09:02 you can use lists really a lot of useful
- 00:09:05 things here and hopefully something
- 00:09:07 which helps you in your view chess
- 00:09:10 application