eventsdata-bindingblazor2-way-object-databinding

Blazor: Binding OnChange events - okay to use EventCallback.Factory.CreateBinder?


I'm new to Blazor and while designing components I ran across an example of someone using a binding method that I wasn't familiar with.

They are using EventCallback.Factory.CreateBinder() instead of the binding techniques shown in relevant Microsoft documements detailing how to bind data.

This is how they are accomplishing binding:

@onchange="EventCallback.Factory.CreateBinder<string>(
               this,
               value => CurrentValueAsString = value,
               CurrentValueAsString,
               null)"

But the way that I have seen it in the past involved a method with a specific name like 'ValueChanged' as an event callback to take care of the binding. As shown here.

Are there any downsides to using the EventCallback.Factory.CreateBinder() method instead of the way outlined in the Microsoft documents?

When I googled the CreateBinder() method, I saw that it was marked for "internal use only". Does this mean that I'm not supposed to use it? Shown as "internal use only" here.


Solution

  • @onchange="EventCallback.Factory.CreateBinder<string>(
               this,
               value => CurrentValueAsString = value,
               CurrentValueAsString,
               null)"
    

    This is over skilled... but sometimes may be a better choice than providing a method name. The value of the @onchange directive attribute above is rather similar to that produced by the compiler in the BuildRenderTree method.

    But the way that I have seen it in the past involved a method with a specific name like 'ValueChanged' as an event callback to take care of the binding. As shown here.

    Here you're referring to component binding, between a parent and its child. However, the code snippet above with the @onchange directive attribute is related to element data-binding... Actually they are based on the same principle. If you bind a child component to its parent's MyValue property, like the following:

    <Child @bind-Value="MyValue"/>

    And the following in the child component:

    [Parameter]
    Public string Value {get;set;}
    [Parameter]
    Public EventCallback<string> ValueChanged {get;set;}
    

    then the compiler will create the code that performs the binding (two-way data-binding). If you view the file, you'll notice that the code produced by the compiler is almost identical to code used for element databinding.

    Are there any downsides to using the EventCallback.Factory.CreateBinder() method instead of the way outlined in the Microsoft documents?

    I don't think so...

    When I googled the CreateBinder() method, I saw that it was marked for "internal use only". Does this mean that I'm not supposed to use it?

    We are not supposed to do many things...

    You should learn by imitation... I've seen the Blazor's team's folks using CreateBinder in their comments in github's issues...not the end of the world. It's up to you...