Data binding elements in external files.

[Mateusz]

Hi everybody,

I have a problem - as the tittle says - with data binding when given element is in external file.
For example this button is in file 'views/login_form.html':

<button id="form_submit" data-bind="events: { click: submit }" >
Sign in
</button>

and this is the model for this click action:

var viewModel = kendo.observable({
  submit: function(e) { 
    e.preventDefault();
    alert(2);
});

kendo.bind($("#form_submit"), viewModel);


When this button is index.html then everything works just fine, but when I put in in external file - well, it doesn't work. It also doesn't throw any errors - just nothing happens.

How can I fix this?

[Atanas Korchev]

Hello,

This will occur if $("#form_submit") can't find the button for some reason. Can you confirm this is not the case? You can do a console.log($("#form_submit").length). It should not output "0".

Regards,
Atanas Korchev
Telerik

[Mateusz]

This code:

console.log('Form submit  ===>' + $("#form_submit"));

returns this:

Form submit  ===>[object Object]

so it is finded..

[Atanas Korchev]

Hello,

In that case it should work as expected. Please try showing your code in a jsbin demo. Kendo UI is available in the list of JavaScript frameworks.

Regards,
Atanas Korchev
Telerik

[Mateusz]

And could You tell me how to create other file in there and link it ?

EDIT:
just resolved this:

I have to bind it before it's show. So :

data-before-show="bindIt"

and

function bindIt()<br>{<br>    kendo.bind($("#form_submit"), viewModel);<br>}

solved it.