I’m noticing that when I have the below input…
<input value.bind="model" /> and I have a change event wired up to the input, that change event never fires when the model is updated. I see the value in the input change in the UI but no event is fired. Am I missing something or do I need to add some sort of hook to manually fire a change event when the model is changed?
How is “model” defined in your viewmodel? I believe you have to declare it as @bindable
I don’t need that model to be observable, just need the DOM input change event to happen. See a gistrun example at https://gist.run/?id=ff377335fa7b45b525beda06a53f1671
Well, my suggestion would be to use what Aurelia has to offer of built-in functionality regarding binding and change-events: https://gist.run/?id=ae0450533194473ebc606394ed78875b
Thanks for the effort. I think the issue here is I might not be communicating the issue properly. I have no issues with binding to model change event. The issue stems from the inability to trigger the DOM inputs change event. This is important to me for this scenario because I have a custom component that has some things wired up which includes listening to an input’s change event which could happen either by manual changing or changing via code. The issue here is that when I change the model for <input value.bind="model"/>aurelia does what it’s suppose to do with updating the value in the input but a change event is never fired as it is with manually changing. I tested it with $('input').val('new value') and that will also not fire a change event like manually. What I’ll need to do is manually trigger a change event when the model changes either in the ViewModel or by creating a BindingBehavior.
try this in your changeValue-function: this.refInput.dispatchEvent(new Event("change"));
Not sure if it’s related, but I’ve seen similar issues when I don’t decorate the bound value (e.g. ‘model’) with the @bindable attribute. Do you get the change event if you add bindable to the model (@bindable model)?
Thanks @bulldetektor. Most of the replies mention using @bindable. To be clear on the issue, the model (which is what the bindable decorator is binding too) binding works just fine and I have complete control over the model and and change events to that object. Also, the HTML input’s value attribute, to which the @bindable model is bound to, updates as expected with the value changing in the UI both ways, again, as expected.
What’s not happening, and the reason for this post, is that when the value is changed via code, rather than physical user typed in value, the DOM input’s change event is not fired. I’m not really sure this is really a bug/issue since testing with jQuery’s $('input').val('my new value') also does not fire the DOM inputs change event. I’m assuming this because the model is bound to the value attribute and it must be that the DOM only is listening to the change, for its change event, to the actual focus, keyup/down, and blur of the input to check if the value is changed.
I also understand that I can use aurelia’s convention of modelChanged() when the model is decorated with either @bindable or @observable. What I’m trying to accomplish, and probably should have provided this detail in the first place, is working with a view that has many inputs that all have values, and in some cases, dynamically build, and will be using a form validation component that is listening to the DOM inputs change event to know when to re-run the validations. What I did not want to have to do is manually add an event trigger to the model change to then trigger a change event on the DOM input. Usually that’s not an issue since in 95% of the cases the user will be typing in the values. The other 5% will be auto value changes for scenarios such as auto filling in a form from a previous entry (from DB) or a value change based another input’s value. For now, any time I change a model value with code, I manually trigger a change event.
When your model change, input value is basically set like this: input.value = modelValue, which will not trigger a change event
A quick look at what you describe, I think you are relying in UI to fire change event to detect dirty state of the model, even that change came from the model itself ? Maybe then you can validate right after setting new value.
Thanks @bigopon. That’s the same conclusion I can up with, that it won’t fire a change event on the DOM side. So what you suggested is what I ended up doing. Whenever there is a code model change, rather than user typed value change, I fire a method available on our custom validation component, that will then check any changes with the inputs and validate. In the end, it wasn’t a bid deal but wondered if there was some sort of built in feature in aurelia to tell it that when the input’s value is changed, via a bound model, to fire the inputs change event. I can of course do that with a binding behavior which i may make.