search

kevinjpetersen / BlazorQuery

BlazorQuery is a Blazor Library that wraps jQuery completely in C# so that DOM Manipulation, Ajax, etc, can be done directly without leaving the comfort of C#.
MIT License
85 stars 18 forks source link

Compatability with Blazor updating? #1

Open HurricanKai opened 5 years ago

HurricanKai commented 5 years ago

Is this compatible with Blazor updating the DOM? Wouldn't that override all changes? For example:

@page "/"
@inject BlazorQueryDOM DOM

<h1>@TestVal</h1>

@code {
    string TestVal = "TestA";

    protected override async Task OnAfterRenderAsync()
    {
      await DOM.Select("h1").Text("TestB");
      TestVal = "TestC"
    }
}

What will actually be displayed? (I'm not at home and I'm really interested into this, maybe you can answer, else I'll try it out later)

kevinjpetersen commented 5 years ago

Hey @HurricanKai, thanks for your concern/question!

I just tested this exact scenario, and you seem to be right that there is some weird things happening in cases like this. It seems that setting the content of an element after having the binded "TestVal", unbinds it and makes TestVal no longer display.

I'm gonna look into it to see if I can find a possible fix.

CSBatchelor commented 3 years ago

You'll definitely want to avoid modifying the DOM manually when using Blazor. In Blazor's JS Interop documentation it says as much.

Warning

The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

Later in the documentation, it states that they would only recommend modifying an element if the element started out empty. That way Blazor doesn't try to diff it.

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

amazingalek commented 3 years ago

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

I use this project specifically for DOM manipulation, as I'm making a Chrome extension with Blazor for manipulating web pages.

kevinjpetersen commented 3 years ago

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

I use this project specifically for DOM manipulation, as I'm making a Chrome extension with Blazor for manipulating web pages.

I can definitely see this use case as you just pointed out. Being able to manipulate DOM's easily in Chrome extensions is really powerful.

I do agree that supporting both scenarios would make a lot of sense.