Data binding elements in external files.

5 posts, 0 answers
  1. Mateusz
    Mateusz avatar
    3 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    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?
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mateusz
    Mateusz avatar
    3 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    This code:
    console.log('Form submit  ===>' + $("#form_submit"));
    returns this:
    Form submit  ===>[object Object]
    so it is finded..

  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mateusz
    Mateusz avatar
    3 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready