Question

I have a scenario where I have a div bound to an observable using with

div data-bind=with:foo

inside this div I have form

I’m using jquery validate and so in my js I have call such as

$(form).validate({submitHandler...

The submitHandler does not work while using ‘with’ – if I remove the ‘with’ statement, the form works.

Anyone encounter this or know of a fix ?

Answer 1

Doing with: foo is the equivalent of doing template: { if: foo, data: foo }.

When you are using an anonymous template (not named, uses children), then the first thing that the binding does is save off the children of the element as a clean template and then generates the content using that “template”.

So, you are likely adding your handlers to the elements prior to them being saved off as a template.

If you want to work with the actual elements that have been generated by the with binding, then you could choose to use the afterRender function. In this case, you would specify your binding like: data-bind="with: { data: foo, afterRender: myFunction }.

Here are some docs on using afterRender: http://knockoutjs.com/documentation/template-binding.html#note_3_using_afterrender_afteradd_and_beforeremove

The afterRender function passes in an array of elements. You can call your wireup code at that point.