KnockoutJS + ASP.NET MVC 4 + Data Annotations FAIL

176 views
Skip to first unread message

Gisela Torres

unread,
Mar 15, 2013, 9:59:48 AM3/15/13
to knock...@googlegroups.com
Hi folks,

I'm working with ASP.NET MVC 4 and KnockoutJS and I found this situation: I created a helper to retrieve all data-* attributes that JQuery Validation needs: Something like that:

<input class="required" data-bind="value: Nombre" data-val="true" data-val-length="The field Nombre must be a string with a maximum length of 10." data-val-length-max="10" data-val-required="The Nombre field is required." id="Nombre" name="Nombre" type="text" value="" />

The thing is that KnockoutJS makes JQuery Validation useless when It binds a model property into this field...

I tried to make a custom binding but It doesn't work either:

ko.bindingHandlers.validate = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).validate(options);
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).validate(options);
    }
};

Also tried this case but this sample has the class="required" explicit and the rest of my rules doesn't work either.

Any solution for this case?

Thanks a lot and sorry for my English :)

Regards!

Casey Corcoran

unread,
Mar 15, 2013, 12:20:15 PM3/15/13
to knock...@googlegroups.com
I'm working on a custom binding "set" that basically:
  1. Creates an instance of a manager class in the "parent" binding
  2. Calls applyBindingsToDescendants
  3. "child" bindings need to be able to get at the manager class instance from step 1
Here's a skeleton jsfiddle that should give you the idea…


Basically looking for the best practice way to share/persist data between custom bindings.

The real code I'm working on is a drag and drop binding, where you would have something like this:

<div data-bind="dragdrop:{drop:someHandler}">
    <ul data-bind="foreach:items">
        <li data-bind="text:$data,draggable:true"></li>
    </ul>
    <div data-bind="droppable:true"></div>
</div>

Any advice would be greatly appreciated!

Casey Corcoran
Reply all
Reply to author
Forward
0 new messages