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/

Roy J · Accepted Answer · 2015-12-09 13:31:33Z

2

+100

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 9, 2015 at 13:31

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

PeterM Over a year ago

It works here. But for some reason it doesn't work in my project. Here is snapshot available balin.maslosoft.com/array-validators/dev/validator.php - open console for output of validator binding handler.

Roy J Over a year ago

Your with bindings are failing because you're using "app.model" when the app structure is outside your viewmodel.

PeterM Over a year ago

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: [....

Roy J Over a year ago

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.

PeterM Over a year ago

While this does not answer questions, your comments pointed me in right directions, thanks.

|

super cool · Accepted Answer · 2015-12-09 13:50:36Z

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 9, 2015 at 13:50

answered Dec 9, 2015 at 11:15

super cool

6,0653 gold badges34 silver badges67 bronze badges

3 Comments

PeterM Over a year ago

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.

super cool Over a year ago

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 ,

PeterM Over a year ago

Yes, I have valid value. I've uploaded full example here: balin.maslosoft.com/array-validators/dev/validator.php open console for results.

PeterM · Accepted Answer · 2015-12-16 07:16:40Z

0

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.

answered Dec 16, 2015 at 7:16

PeterM

1,5791 gold badge23 silver badges33 bronze badges

Collectives™ on Stack Overflow

Knockout binding handler pass array of objects

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related