Use events with textInput

[Helene Francke]

Hi!

I have input fields that have the textInput-binding, but I would also like to trigger a function on keyup. If I use event: {onkyeup: $root.myFunction()} the function is triggered on page load and then it won't trigger when I type in the input field.

Does anyone have any idea on how I can fix this? The input is used to filter an array. Maybe textInput isn't the best choice for this?

//Helene

[Michael Best]

You shouldn't need to add an event binding. Just subscribe to the bound observable. If you have textInput: myObservable, then in your code: this.myObservable.subscribe(this.myFunction)

-- Michael

[Helene Francke]

Thank You!

I tried that and I get this error (when the subscribe-line is inside the viewModel):

Uncaught TypeError: f.jb is not a function (in knockout.js source code)

When I had the subscribe line just before the viewModel binding (where I'm guessing it is supposed to be), I get this error:

Uncaught TypeError: Cannot read property 'subscribe' of undefined

Does this refer to the content of myObservable or does it not know what myObservable is? If it refers to the content, then I can't use subscribe since it breaks my entire knockout code.

There won't be any content until it is entered into the input, and I would like to avoid prepopulating any value since there are conditionals in the layout based on myObservable being empty. I could change that if I have to, but I would rather not.

If it simply does not know what myObservable is... Well, then I'm lost.

//Helene

[Gunnar Liljas]

Have you defined "myObservable"?

this.myObservable=ko.observable();

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Helene Francke]

Yes. Subscribe has never really worked for me. In this particular case, however, I've switched to a computed function that seems to fire on it's own without the need for eventhandlers to call the function. And it would seem that it doesn't need a subscribe either, because it works just fine without it. The computed function has if-conditions that check if myObservable() has any value and then it runs some code, else it just returns.

The background is that I'm building a filterfunction and I had some issues with making it work with multiple variables. I took some detours with making new lists based on the filters and then adding the next filter to the new list, but after some deliberation with my colleague we managed to fix it without the extra lists. Here is the function:

self.filterEmpl = ko.computed(function () {

        var filteredList = self.employeeList();

        if (self.departmentFilter()) {

            filteredList = ko.utils.arrayFilter(filteredList, function (employee) {

                var departmentFilter = self.departmentFilter().toLowerCase();

                if (employee.Department.Name != null && employee.Department.Name.toLowerCase().indexOf(departmentFilter) >= 0) {

                    return employee;

                };

            });

        }

        if (self.officeFilter()) {

            filteredList = ko.utils.arrayFilter(filteredList, function (employee) {

                var officeFilter = self.officeFilter().toLowerCase();

                if (employee.Office.OfficeName != null && employee.Office.OfficeName.toLowerCase().indexOf(officeFilter) >= 0) {

                    return employee;

                };

            });

        }

        if (self.positionFilter()) {

            filteredList = ko.utils.arrayFilter(filteredList, function (employee) {

                if (employee.Position != null && employee.Position.toLowerCase().indexOf(self.positionFilter().toLowerCase()) >= 0) {

                    return employee;

                };

            });

        }

        return filteredList;

    });

[Dennis Jakobsen]

That wont give you the particular event or key pressed, only the updated value.

Question is why registering an event prevents knockout from working. Obviously this is a bug, no element is limited to one event. And registering more events do not overwrite other events.

[Dennis Jakobsen]

I have that same issue.

I can't even bind outside the input. I was hoping i could just wait for the event to bubble outside the context. I have a fiddle here to demo the issue: http://jsfiddle.net/LkqTU/37067/

It seems binding a keyup handler in any Knockout context seems to entirely disable textinput. Bizarre.

[Valay Variance]

Hi please add me on skype : valay.variance

[Michael Best]

Read: http://knockoutjs.com/documentation/event-binding.html#note-3-allowing-the-default-action