This site is built with Viewi itself. It is experimental and still in development. If you see any bugs please do not hesitate and open an issue or DM me on Twitter.

Tour of Heroes

Step 6 - Create HeroDetail component

We display a list and selected hero details in the same component. Let's separate those and create the HeroDetail component. It will have the $hero property with a null value by default.



namespace Components\Views\HeroDetail;

use Components\Models\HeroModel;
use Viewi\BaseComponent;

class HeroDetail extends BaseComponent
    public ?HeroModel $hero = null;    

Please move the hero details HTML part to the view, renaming $selectedHero to the $hero accordingly:


<div if="$hero">
    <h2>{strtoupper($hero->Name)} Details</h2>
    <div><span>id: </span>{$hero->Id}</div>
        <label for="hero-name">Hero name: </label>
        <input id="hero-name" model="$hero->Name" placeholder="name">

And now, in our Heroes component template, please remove block with $selectedHero and replace it with HeroDetail tag, like this:


We need to pass our $selectedHero into the HeroDetail component. To do this, you need to set an attribute with the name of a public property that we want to assign.

In our case, based on the code public ?HeroModel $hero = null; it's "hero".

And then set the value that we want to pass through: <HeroDetail hero="$selectedHero" , like this:

<HeroDetail hero="$selectedHero"></HeroDetail>

More about passing data through properties here:

The result should be:


<h2>My Heroes</h2>
<ul class="heroes">
    <li foreach="$heroes as $hero" (click)="onSelect($hero)" class.selected="$hero === $selectedHero">
        <span class="badge">{$hero->Id}</span> {$hero->Name}
<HeroDetail hero="$selectedHero"></HeroDetail>

Now your code is cleaner. Try to refresh the page and edit some Hero.

Next step