Knockout binding handler pass array of objects

Question

Is it possible to pass array value with square brackets for binding handler?, ie:

<div data-bind="validator: [{class: RequiredValidator}, {class: EmailValidator}]"></div>

It works fine for one object:

<div data-bind="validator: {class: RequiredValidator}"></div>

Class value is not observable, just javascript object.

It throws Message: Unexpected token ) error.

Or I need some other syntax? I could wrap it with object, but prefer not.

I took snapshot of project with this issue, available here: http://balin.maslosoft.com/array-validators/dev/validator.php

Open console, and object validators will show configuration, while array will fail.

Here is fiddle with minimal example: http://jsfiddle.net/piotr/fu8d0hm3/

super cool · Answer 1 · 2015-12-09T13:50:36.283

2

All you need to set a VALID value to the key you are passing . As in you case RequiredValidator is not defined so keep that in quotes to resolve the issue .

view:

<div data-bind="validator: [{class: 'RequiredValidator'}, {class: 'EmailValidator'}]"></div>

viewModel:

ko.bindingHandlers.validator = {
  init: function(element, valueAccessor) {
    console.log(valueAccessor()); //check console window for o/p
  }
}
ko.applyBindings();

check sample here

edited Dec 09 '15 at 13:50

answered Dec 09 '15 at 11:15

super cool

6,003
2
30
63

In ko quotes are not nessesary, ie. `validator: {class: RegExpValidator}` works fine. Your example works too. However in my case it does not work even with quotes, weird. – PeterM Dec 09 '15 at 13:18
ok i get it @PeterM . so you need set `valid value` to key value pairs . ex: class:hello is undefined where as class:'hello' works fine , – super cool Dec 09 '15 at 13:47
Yes, I have valid value. I've uploaded full example here: http://balin.maslosoft.com/array-validators/dev/validator.php open console for results. – PeterM Dec 09 '15 at 16:00

score 2 · Answer 2 · answered Dec 09 '15 at 13:31

2

It works for these. Might the problem be in your binding handler?

ko.bindingHandlers.validator = {
  init: function(el, va) {
    var value = va();
    console.debug(value);
  }
};

vm = {
  something: ko.observable('hi')
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="validator: ['one']"></div>
<div data-bind="validator: [something()]"></div>
<div data-bind="validator: [{class: something()}, {class:'whatever'}]"></div>

answered Dec 09 '15 at 13:31

Roy J

42,522
10
78
102

It works here. But for some reason it doesn't work in my project. Here is snapshot available http://balin.maslosoft.com/array-validators/dev/validator.php - open console for output of validator binding handler. – PeterM Dec 09 '15 at 16:03
Your `with` bindings are failing because you're using "app.model" when the app structure is outside your viewmodel. – Roy J Dec 09 '15 at 20:18
`app` is global variable, it is accessible. Try for example type something in first input and then check in console: `app.model.txt1.text`. Knockout fails clearly at `validator: [...`. – PeterM Dec 10 '15 at 07:04
The first message in the console is Uncaught SyntaxError: Unable to process binding "with: function (){return ko.getObservable($data,"app.model.txt3")||app.model.txt3 }" Message: Unable to parse bindings. – Roy J Dec 10 '15 at 11:10
What is the `htmlValue` binding? Should that be `html`? – Roy J Dec 10 '15 at 11:31
It is two-way binding for conteneditable div, it's irelevant here. I know that error message is confusing. As there is not even `(` token in binding. Notice that first 3 console outputs are proper validator config, while 4th validator for **Validate contenteditable if it's not empty and valid email:** fails. – PeterM Dec 11 '15 at 10:18
@PeterM I think we're back to the problem being in the `validator` binding handler, which is unfortunately complicated, but does not seem to accept an array. – Roy J Dec 11 '15 at 12:13
`init` function is very simple, it only `console.log ` - depending if it's function - `ko.unwrap(valueAccessor())` or `ko.unwrap(valueAccessor)`. It does not even come to this statement. Maybe it's some problem with es5 plugin. – PeterM Dec 11 '15 at 12:53
It turn out to be es5 plugin problem... Newer version works fine. – PeterM Dec 11 '15 at 13:08
1

While this does not answer questions, your comments pointed me in right directions, thanks. – PeterM Dec 16 '15 at 07:18

score 0 · Accepted Answer · answered Dec 16 '15 at 07:16

It turned out that it was problem with knockout-es5 modification for two-way bindings.

Original plugin is not affected. I've created pull request to address this issue.

The problem was binding preprocessing, which produced invalid code if array value was passed.

Knockout binding handler pass array of objects

3 Answers3