Плеер не показывает нужный фильм без перезагрузки

Question

Я встроил плеер на сайт, который вызывается по нажатию на кнопку:

<input @bind-value="title"/>
<div id="chat-bottom-button-right-row">                
     <button @onclick="RunMovie">Chat</button>
</div>

плеер:

<div id="video">
<div id="kin-x" data-height="640" data-title="@title"></div>
</div>

А вот сам метод:

[Inject]
public IJSRuntime Js { get; set; }

string title;

private async Task RunMovie()
{
    await Js.InvokeVoidAsync("kinX").AsTask();
}

Т.е логика такая: я запускаю сайт, ввожу название фильма, нажимаю на кнопку и появляется плеер с фильмом. Но если я ввожу название другого фильма, плеер начинает воспроизводить тот же фильм. Т.е он будто не видит новые значения и приходится перезагружать страницу, чего мне не хочется делать, т.к это спа. Мне кажется, что проблема в Js.InvokeVoidAsync() - он как-то странно работает

Answer 1

Blazor контролирует DOM-дерево и js, который применяется для этого плеера, наглым образом вторгается в это DOM-дерево, втыкая разметку, а потом кеширует это. Blazor во время рендера старается как можно меньше времени работать с домом, поэтому использует подкапотный итератор элементов.

public RenderFragment BuildPlayer() => builder =>
{
     unchecked
     {
         builder.OpenElement(iterator++, "div");
         builder.AddAttribute(iterator++, "Id", "video");
         builder.OpenElement(iterator++, "div");
         builder.AddAttribute(iterator++, "Id", "kin-x");
         builder.AddAttribute(iterator++, "data-height", "640");
         builder.AddAttribute(iterator++, "data-title", Movie?.Title);
         builder.CloseElement();
         builder.CloseElement();
     }
};

В нормальной ситуации, тут надо писать руками ( 0 1 2 3 4 5 6 7 8 ). Это делается для того, чтобы выдать id для куска дома. И когда что-то изменится, blazor рассчитал, что изменилось и изменил только это. В нормальной ситуации - это было бы преступление такое писать, но в данном случае js вмешивается в дом, поэтому приходится портить оптимизацию для этого участка.

БЛОГ НА HUSL

Плеер не показывает нужный фильм без перезагрузки

Ответы (1 шт):