Есть ли более короткий способ выполнить эту задачу в Blazor? - PullRequest
Новая
       109

Есть ли более короткий способ выполнить эту задачу в Blazor?

1 голос
/ 10 июля 2020 
<div class="container">
    @foreach (var item in todos)
    {
    <div class="row">
        <div class="col-sm-6">
            <input type="checkbox" @bind="item.IsDone"/>
            @if(item.IsDone){
                <span style="text-decoration: line-through">@item.Title</span>
            }else{
                <span>@item.Title</span>
            }
        </div>
    </div>
    }
</div>

<input placeholder="Something todo" @bind="newTodo"/>
<button @onclick="AddTodo">Add todo</button>

Я хочу, чтобы стиль применялся при проверке элемента, но более кратко, используя только привязку данных без оператора if.

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Вы можете сделать что-то вроде этого ...

В определении класса ToDo добавьте новое поле с именем 

 public string Style => IsDone ? "text-decoration: line-through" : "";

И использование будет следующим: 

<input type="checkbox" @bind="item.IsDone"/>
<span style="@item.Style">@item.Title</span>

Надеюсь, это поможет ...

2 голосов
/ 10 июля 2020

Согласно Условным HTML атрибутам элемента

HTML атрибуты элемента условно отображаются на основе значения. NET. Если значение равно false или null, атрибут не отображается. Если значение истинно, атрибут отображается минимизированным.

Чтобы вы могли использовать встроенное условие (при условии, что это работает, я не пробовал это): 

<span style="@item.IsDone ? "text-decoration: line-through" : null">@item.Title</span>
...