Skip to content

Commit 2e66829

Browse files
ToiWrightdanroth27
authored andcommitted
Update 02-customize-a-pizza.md
Text edits.
1 parent d8a48c6 commit 2e66829

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

docs/02-customize-a-pizza.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ Now the dialog shows a slider that can be used to change the pizza size. However
134134

135135
![Slider](https://user-images.githubusercontent.com/1430011/57576985-eff40400-7421-11e9-9a1b-b22d96c06bcb.png)
136136

137-
We want to make it so the value of the `Pizza.Size` will reflect the value of the slider. When the dialog opens, the slider gets its value from `Pizza.Size`. Moving the slider should update the pizza size stored in `Pizza.Size` accordingly. This concept is called two-way binding.
137+
We want the value of the `Pizza.Size` to reflect the value of the slider. When the dialog opens, the slider gets its value from `Pizza.Size`. Moving the slider should update the pizza size stored in `Pizza.Size` accordingly. This concept is called two-way binding.
138138

139139
If you wanted to implement two-way binding manually, you could do so by combining value and @onchange, as in the following code (which you don't actually need to put in your application, because there's an easier solution):
140140

@@ -148,7 +148,7 @@ If you wanted to implement two-way binding manually, you could do so by combinin
148148
@onchange="@((ChangeEventArgs e) => Pizza.Size = int.Parse((string) e.Value))" />
149149
```
150150

151-
In Blazor you can use the `@bind` directive attribute to specify a two-way binding with this behavior. The equivalent markup using `@bind` looks like this:
151+
In Blazor you can use the `@bind` directive attribute to specify a two-way binding with this same behavior. The equivalent markup using `@bind` looks like this:
152152

153153
```html
154154
<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" />
@@ -158,7 +158,7 @@ But if we use `@bind` with no further changes, the behavior isn't exactly what w
158158

159159
![Slider with default bind](https://user-images.githubusercontent.com/1874516/51804870-acec9700-225d-11e9-8e89-7761c9008909.gif)
160160

161-
We'd prefer to see updates as the slider is moved. Data binding in Blazor allows for this by letting you specify what event triggers a change using the syntax `@bind:<eventname>`. So, to bind using the `oninput` event instead do this:
161+
We'd prefer to see updates as the slider is moved. Data binding in Blazor allows for this by letting you specify which event triggers a change using the syntax `@bind:<eventname>`. So, to bind using the `oninput` event instead do this:
162162

163163
```html
164164
<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
@@ -297,9 +297,9 @@ void CancelConfigurePizzaDialog()
297297
}
298298
```
299299

300-
Now, what happens when you click the dialog cancel button is that `Index.CancelConfigurePizzaDialog` will execute, and then the `Index` component will render itself. Since `showingConfigureDialog` is now `false` the dialog will not be displayed.
300+
Now when you click the dialog's Cancel button, `Index.CancelConfigurePizzaDialog` will execute, and then the `Index` component will rerender itself. Since `showingConfigureDialog` is now `false` the dialog will not be displayed.
301301

302-
Normally what happens when you trigger an event (like clicking the cancel button) is that the component that defined the event handler delegate will rerender. You could define events using any delegate type like `Action` or `Func<string, Task>`. Sometimes you want to use an event handler delegate that doesn't belong to a component - if you used a normal delegate type to define the event then nothing will be rendered or updated.
302+
Normally what happens when you trigger an event (like clicking the Cancel button) is that the component that defined the event handler delegate will rerender. You could define events using any delegate type like `Action` or `Func<string, Task>`. Sometimes you want to use an event handler delegate that doesn't belong to a component - if you used a normal delegate type to define the event then nothing will be rendered or updated.
303303

304304
`EventCallback` is a special type that is known to the compiler that resolves some of these issues. It tells the compiler to dispatch the event to the component that contains the event handler logic. `EventCallback` has a few more tricks up its sleeve, but for now just remember that using `EventCallback` makes your component smart about dispatching events to the right place.
305305

@@ -362,7 +362,7 @@ Create a new `ConfiguredPizzaItem` component for displaying a configured pizza.
362362
}
363363
```
364364

365-
Add the following markup to the `Index` component just below the main `div` to add a right side pane for displaying the configured pizzas in the current order.
365+
Add the following markup to the `Index` component just below the `main` div to add a right side pane for displaying the configured pizzas in the current order.
366366

367367
```html
368368
<div class="sidebar">

0 commit comments

Comments
 (0)