Closed RehanSaeed closed 5 years ago
This description should just demonstrate some basic fundamentals about data binding. In practice, you would probably work with a state object. There, you can use events or reactive programming.
This is what I'm imagining:
<button id="foo">Click me (child component)</button>
@functions {
private Subject<T> someEvent;
public IObservable<T> WhenSomeEvent { get; set; }
public void OnInit()
{
var subscription = this.foo.onclick
.Sample(TimeSpan.FromSeconds(3))
.Subscribe(x => {
someEvent.OnNext(x);
});
subscription.Dispose(); // Unregister the event.
}
}
It's interesting that you are not using C# events.
I'm not sure how we'd use C# events for this. Where does the event itself live? We'd have to have some kind of object to represent the <button>
, but there's nothing like that, and it's not the kind of pattern commonplace in SPA frameworks. I'd consider the current design to have a lot less overhead.
It would be great if IObservable
could somehow be used so you could easily use Reactive Extensions (Rx) to debounce events being raised or any of the other 101 other uses for Rx.
Ideally I'd hope you could do something like:
<button @onclick(Trigger(someObservable))>Click me</button>
@functions
{
MyObservable someObservable = new MyObservable();
}
... where Trigger
is a method that returns an action that knows how to cause a MyObservable
to issue a notification.
Is something like that possible with Rx?
How do you unsubscribe from an event in Blazor?
Implement IDisposable
(e.g., @implements IDisposable
at the top of the file). Then put your unsubscription logic in your Dispose
method. It gets called when the component is removed.
I hope this answers the questions! Our goal is certainly to compose well with libraries like Rx, but we're not expecting to be coupled specifically to any of them.
Although the issue is closed, I wonder how events like "text changed" on a text box can be handled. A button can trigger an event but how a text change event implemented is a mystery to me.
I came across the problem while trying to add a search bar feature on a data table. When user types more than 3 letters in a text box, ""text changed event" should be triggered after 300 milliseconds. But I couldn't manage it. It might be most probably due to my lack of knowledge on Blazor, Razor syntax or C# in general but I believe there must be a way about event handling needs somewhere there.
According to the docs you can subscribe and raise events like so:
It's interesting that you are not using C# events. It would be great if
IObservable<T>
could somehow be used so you could easily use Reactive Extensions (Rx) to debounce events being raised or any of the other 101 other uses for Rx.How do you unsubscribe from an event in Blazor? When a component is torn down, are events unsubscribed for you?
IObservable<T>
uses theIDisposable
pattern quite nicely for this purpose.