Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We can name our bear. Now let's see what else is available for it. Our `builder()` view is the bulk of our application, so let's get started!
New Terms
{% for x in y %}: You already know what for x in y: does in Python, but this is the template version. This will cause the enclosed code to be run as many times as there are things in y. Has to be followed by {% endfor %}.
{% if %}: The template version of Python's if condition. Closed with {% endif %}.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay.
So, this was pretty cool,
0:00
being able to like name our bear and pull
the name back out.
0:02
But, I'd like to do a whole lot more.
0:05
We're supposed to have this whole bear
builder, character builder thing.
0:06
So, let's see if we can build that whole
view in one video.
0:10
All right.
0:16
So, let's add a new route.
0:17
And I'm gonna call it, builder.
0:23
And, I'm gonna call the function, builder
cuz that's just the kind of dude I am.
0:25
'Kay.
0:30
So, this builder one is gonna render our
pre-built builder template.
0:31
And really, that's all I want it to do.
0:38
So, I'm just gonna go return render
template, and
0:40
the template's name is builder.html.
0:43
And, saves is gonna be getSavedData, which
we can actually do here.
0:51
>> getSavedData.
0:59
>> Save ourselves one line of code, right?
1:02
>> And then, I wanna pass in what these
like, these default things are.
1:05
>> That are here inside options.
1:11
>> If we look in options, there is a
dictionary called defaults.
1:13
I want to pass that in.
1:16
So first, I need to import it.
1:17
So, from Options > Import Defaults.
1:20
And then, secondly, I need to pass it in
here.
1:24
So, options equals defaults.
1:28
Okay.
1:31
So, there's our builder.
1:35
And, what I want, my,
1:38
the way I'm envisioning this is after the
save, it always goes back to the builder.
1:39
So, we're gonna actually have those
redirect to builder.
1:44
Sorry, hit the wrong key.
1:50
We're gonna have those redirect to
builder, not to index.
1:52
'Kay.
1:58
So, let's see how that looks.
1:58
Let's just hit Build It.
1:59
See what happens.
2:02
All right.
2:02
Well, not a whole lot's on here.
2:05
We've got a bear.
2:07
And, I've got a button that says Update.
2:08
But, that's really all we have.
2:09
All right.
Let's just,
2:14
let's check out this builder thing.
2:14
It extends our layout, which is good.
2:17
And then, we've got, this, this block.
2:21
There's an area here to, to type something
in, and there's a bear, and that's it.
2:27
'Kay.
So, let's add a little bit.
2:33
So, the first thing we need to add is,
here in this value,
2:35
we want to print out saves.getmain.
2:38
We wanna do that thing again, so let's
refresh.
2:41
Hey!
There's Mike, cool.
2:47
Mike The Bear, that little bear.
2:49
And then, now, we want to be able to have
a bunch of colors.
2:54
So, if we look in options, and like I
said, we're not going to edit this.
2:58
But, we see we have this colors, we have
all this colors things.
3:03
So, let's add here inside this div, we're
going to loop over all of that.
3:06
So, for color in Options > Colors.
3:12
Cuz remember, we can basically just write
Python in here which is really handy.
3:19
We're gonna do this input.
3:24
It's a radio.
3:26
We'll give it an id of whatever the color
name is,
3:29
so if the color's black, it'll be black.
3:31
We're gonna call it colors.
3:33
And, the value is gonna be whatever color
we're currently on.
3:38
And, what I want to do is, I want to have
a thing here
3:43
where if this is the currently selected
color, like the, the color they've saved.
3:48
Then it will select this color.
3:53
So, we're gonna add an if here.
3:56
And, we can actually do this on the next
line, which is kind of cool.
3:59
So if saves dot get color
4:03
is equal to whatever color we're currently
on, then we want to print checked.
4:08
And, end that if and end that input.
4:16
And then, we're gonna have a label.
4:19
And, we're not gonna put anything in that
label.
4:25
Okay.
4:28
Now obviously, the HTML I'm writing here,
4:28
I know it's right because we've already
covered it with our designer.
4:31
So, let's refresh, and there's our color.
4:34
So, let's make this a little bigger.
4:36
There we go, that's not bad.
4:39
There's all of our colors.
4:40
So, we can say, all right.
4:41
Let's make it blue, hit update.
4:44
Oh.
4:47
Because we don't know what the form action
is.
4:49
So, we know how to do this.
4:50
And, that'll be for save.
4:53
Right?
4:56
Let's go back.
4:57
Let's hit Update.
4:58
Sorry, Refresh.
4:59
Hit Update.
5:03
Cool, so it came back out.
5:05
But we didn't get our color.
5:07
Let's look at our Inspector.
5:08
Blue 504, er, 054.
5:12
[BLANK_AUDIO]
5:16
[SOUND]
Oh.
5:18
This should be colors.
5:24
Refresh.
There we go.
5:28
There's our color.
5:30
So, I want to make that actually show up.
5:32
So, let's go and modify this grid this,
our class down here,
5:35
and let's add in saves.get color, so
colors.
5:40
See?
I almost did it again.
5:47
And, let's refresh that.
5:49
Hey, look at that.
5:51
Our bear is now bright orange.
5:52
That's pretty cool.
5:55
I like having a bright orange bear back
there.
5:56
Or, the blue one, that's pretty cool too.
6:00
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up