- [Tutor] Using expressions in your templates
is pretty powerful, but after a while,
it can get pretty complicated
and hard to maintain.
And there are better ways.
Now, the first is something called computed properties.
There are calculations that are cached on reactive data.
What that means is that you can create essentially
what becomes a new variable in your application.
And that variable can do something with existing data.
Now, they will automatically cash
if it's tracking reactive data.
Here, all we're doing is filtering this array
so that it displays any items
that are less than $50.
So it would return an array with these two elements.
Now in here, we are not tracking any reactive properties.
So the computed properties wouldn't be able
to notice any changes in these elements.
More of this in a second, when we'll take a look
at a good example, that illustrates that.
Right, the other way of doing this is called methods.
Now methods don't cache and their calculation methods a lot
like computer properties, they look like this
they look more like regular JavaScript methods.
You create the method
and then you kind of do whatever you want.
And it can be pretty similar to what you would see
in a computed property.
It doesn't create an array, but you can call
this filtered array method in your templates
or in any other events.
And there is that when you call this when, you have to use
the method notation like you would do in JavaScript.
I know what you're thinking.
What's the difference?
Let's take a look at an example so that we can see that.
Here I have a list of items
that is giving me a set of random numbers.
Now notice that they are the same number a bunch of times.
And the reason that's happening is
because I have specified them as computed properties.
And as we go through the loop, it's not going to notice
that my random number needs to change
for every item in this sequence of numbers.
So this is one instance where you would have to create this
not as a computer property, but as a method.
So you would put it in this method section.
It can still be called rand like this
but we're going to have to call it
in the expression like this.
And you can see that the difference will be
that we get different random numbers
as we go through the loop.
Computed properties, they don't update unless
they are reactive elements that are being tracked by view.
And methods are always going to update.
And you can see the big difference in this example.
So one thing about computed properties
is that you can also create what's called a getter
and a setter.
They are getters by default, but you can also set a value
by calling the computed property.
And it looks a little bit different.
You can see that right here we're doing pretty much exactly
what were doing before but we're passing along sort
of a sub method inside this rand property now.
And in here, we can create a get method
and also of course create a set method.
So this is a little bit complicated
but I think that it can be useful on some occasions.
So let's take a look at an example.
So you could see how it's going to work.
Here, we're just creating a single random number.
And you'll notice that my, how big variable is initialized
at 10, but I'm getting a random number
that is much bigger, 763, which means
that we have actually modified this how big variable.
And I'm doing that by using my setter.
So I call this rand with a value of a thousand here.
And because I have a setter in this computer property
it's executing this section, taking the number
that we pass right here and modifying the value of how big
which is then used in my getter.
And you can see here that I am setting the value
and then I'm calling the getter over here.
Let's go ahead and make that 10.
You'll see that when this page reloads,
this is going to affect the value of the random number.
And if we change it to a hundred, you'll see that it now
is picking a number between zero and 100.
Now there's also something called a watcher.
A watcher is a different way of keeping track of changes.
So it's a more generic way of using something
like a computer property or something like a method
that can be useful when using events.
And here's what it looks like.
You create a watch property, and then you can track
the value of some variable and then do something
when UJS notices that that variable has changed.
So before we get too far, let's go ahead
and try that as well, because it's worth a look.
So here we have essentially a simple form
that has an input field with a value.
Notice that it's saying that the maximum price is five.
And if I type in some additional numbers in here
it's going to work just fine until my number gets
to be bigger than a hundred.
So if I go to 101 and I hit return, you'll notice
that it'll say over budget.
Now it's got the lazy modifier right here.
So it's not going to do anything
until I hit the tab or return.
And the reason that this is working like this
is because I have a watcher right here that is keeping track
of what's happening with the max variables.
The max variable remember keeps track
of what's in this input field.
When the value of max is modified
I can go ahead and do something
with the value that gets passed in here, which means
that if I notice that the value is greater than a hundred
then it's going to modify a variable called alert
which I've created right here
and tell you that it's over budget.
Otherwise it's going to say much better.
So if I put a space right here,
it'll reload the application.
You'll notice that it doesn't say that it's
over budget yet because I haven't typed anything in here.
It doesn't notice that it's over budget.
Even if I set this to 200, notice that it doesn't say
that it's over budget because I haven't typed anything.
I haven't interacted.
I haven't changed the value.
And so it's not noticed yet that I have modified the value
and that's what a watcher is doing.
It's keeping track of when the value of a variable changes.
So let's go ahead and set this back to five
and we'll go back to our slides.
If you want to learn more
about computer properties, methods and watchers
make sure you take a look at the documentation.
Now let's take a look
at a potential problem that you can solve.
And it's a good idea to try to do these
before you take a look at me doing the solution.
The problem that we have set up is pretty similar
to what we have been doing before.
We've got our little shopping area here
that allows us to modify the amount of elements based
on the price that we set right here in max price.
It doesn't look very different
than the other things that we have done before.
Let's take a look at what we need to do here.
I want you to create a currency filter.
If you take a look at these numbers, you'll notice
that sometimes they have decimal points.
If you scroll down a little bit,
you'll notice this one has a decimal point.
So I want to create a filter that will make
the decimal points consistent for all the items.
That should all have two spaces
and period with leading sort of zeros here.
And then in addition to that
I want you to display a count based on the maximum.
That means that when I limit the amount
of items by changing the maximum price
I want to know how many items are on this list right here.
In addition to that
I want you to use a filtered array on the v for, which means
that we can also remove the V if statement.
Finally you can show a label
with the quantity based on the price selection.
Let's take a look
at what it should look like when it's done.
So here I have the amount of items currently selected based
on this maximum price.
For $50 there's 22 items.
And as I move this, so you can see that they get bigger
and smaller based on what I select here for the price.
Also, there are leading zeros everywhere
and they are consistently sort of formatted.
So let's go ahead and take care of that.
If you want to take a look
at the difference between the problem
and solution you can take a look at this.
But let's go back to the problem and see what we can do.
Now first, I'm going to create the currency filter
because it's a little bit easier.
So what we'll do is at the same level as data
we're going to create a series of methods.
So we'll say methods, actually
it's just going to be one method
but we'll create a section or a property called methods.
And in here we'll create
a single method called currency, right?
Currency is going to receive a value.
And in here, what we're going to do is use a return statement
and we're going to be using ESX.6's tick marks
to process a variable.
Now here, what we'll do is output a dollar sign
and then we're going to output an expression.
It's going to be a calculation.
So this whole thing is one thing.
And in here, I'm going to use number to make sure
that what I get back is going to be a number
and then use the parse, float JavaScript function
to convert the value
to a fixed amount of items with two decimals.
So that's what this is all doing.
And that means that now, whenever I have a price here,
I can call my filter.
Actually I can leave those expression things.
I'm going to get rid of this dollar sign here
and then use my currency filter, not currently
but currency calling item price rate here.
And once it's updated, you should see the pricing up here.
So let's see currency and looks like I have current c.
So currency, make sure they match properly.
And now you should see that all
of the numbers are done right here.
For the other element that I want to modify
I'm going to create a computed property.
And so let's go ahead and do that.
This is going to be just another section called compute it.
Again it's going to have an object.
And in here I can put in my only computed property
and I'm going to call this one filtered products.
Now this one is going to return the products array
that has all my products,
and then I'm going to use the JavaScript filter.
And I'm going to take each one of the items in products
and put them through a filter.
So I'll say item and then take a look
at the price of each item.
And if it's smaller than the current maximum,
then it's going to create a new array
that has all the elements and products
that are less than the maximum amount.
So now that I have that, it means that instead of sorting
through products, I'm going to sort by filtered products.
So it's only going to give me the products
that are filtered in here.
And I can also get rid of my if statement
because I'm actually doing the same thing that I was doing
within V if statement and this template
by filtering all my products.
The advantage is that I can go ahead
and use the filtered products
and then get the length of that,
to know how many elements I have
when I select these items over here.
Now here, I do have to be careful
because the input field right now
doesn't have a number property here.
Remember that the values that get placed in here
are not numbers or strings.
So we need to make sure that we cast them into numbers
or my list is not going to work properly
as you probably saw a second ago.
And what I can do is create a new badge.
So right after this label, I'll create a div with a class
of badge bg-success, with a margin to the left of three
and I'll put in here label called results.
And then in here I will add filtered products.length.
And make sure I close out that div.
So now it says results and the number of results.
And as I change the pricing here, it's adjusting
and telling me how many items are here
and everything is working with our currency filter as well.
So this was quite a doozy, but you could see the real value
in having the ability of calculating computed properties.
It generates essentially what is a new variable
that you can use in your templates and versus using methods
which allows you to run, you know
some sort of transformation on information on your project.