After upgrade from 2013.1.308 to 2013.1.514 bindings issue

5 posts, 0 answers
  1. Saulius
    Saulius avatar
    8 posts
    Member since:
    Jun 2010

    Posted 17 May 2013 Link to this post

    Hi,
    As title mentions bindings seems not working anymore in my app after upgrade to 2013.1.514 version of Kendo UI. What I use is commonly documented
    $(document).ready(function ($) {
      kendo.bind($("#view"), viewModel);
     });
    Probably need to mention that these views are loaded with separate ajax calls and added to DOM dynamically using this function
    loadExtPage: function (path) {
     //Use jQuery Ajax to fetch the template file
     var tmplLoader = $.get(path)
       .success(function (result) {
         //On success, Add page to DOM
         var index = new kendo.View($('<div />').html(result));
         layout.showIn("#content", index);
       })
    }
    Is there any changes to bindings what I should change in my code? This was working with 308 version...

    EDIT: After further observations it seems binding happening - I added alert just after binding, and view reflects viewModel properties.... but as soon as I close alert binding to viewModel seems disappears...



    Thanks,
    Saulius

  2. Saulius
    Saulius avatar
    8 posts
    Member since:
    Jun 2010

    Posted 17 May 2013 Link to this post

    My problem is related to Kendo View object itself and to be more specific to render method - suggestion to Telerik if model is null or undefined maybe we don't need to do binding to it?

    Thanks,
    Saulius
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 21 May 2013 Link to this post

    Hi Saulius,

    This does not sound like a known issue. Is it possible for you to isolate the problem in a sample jsbin (you can start from here). We will check it right away.

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Saulius
    Saulius avatar
    8 posts
    Member since:
    Jun 2010

    Posted 21 May 2013 Link to this post

    Hi Petyo,

    I was able to simulate this behavior in JSBin please use this code:
    <body>
      <div id="main">
      </div>
    </body>
    </html>
     
    <script>
        var viewLoadedWithAjax = new kendo.View("<div id=\"view\">I want to say: <span data-bind=\"text: showMe\"/></div><script> var viewModel = kendo.observable({ showMe: \"Hello\"}); $(document).ready(function ($) {  kendo.bind($(document.body), viewModel); });  <\/script><div>");
         
         var layout = new kendo.Layout("<section id=\"content\"></section>");
     
        layout.render($("#main"));
         
        setTimeout('layout.showIn("#content", viewLoadedWithAjax)', 2000)
    </script>

    SetTimeout here is for simulating ajax call, when view is downloaded i'm showing it in some layout. But binding to viewModel inside a downloaded view is broken. To solve this I now use

    viewLoadedWIthAjax.render()

    before showing in layout, but from souce code it seems redundant as layout.showIn actually do view.render.... So my suggestion is to check in View class(your source code) and do binding to model only if it is not null.

    Best regards,
    Saulius
  5. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 23 May 2013 Link to this post

    Hi,

    The approach you have employed in your sample relies on ajax calls to bring rendered mix of javascript data, scripting logic,  and HTML. 

    The SPA pattern on the other hand, revolves around the UI logic/templates being preloaded (scripts, view templates, ViewModels, event handling, etc.) while the data/content being fetched dynamically on demand, using compact JSON/XML format in order to achieve a responsive UI. Loading entire HTML blocks with scripts in it as view templates with ajax sort of defeats the purpose, and does not justify the additional complexity introduced with the SPA pattern. This being said, the design of our SPA framework is not applicable for such usage. 

    If your project type makes this approach a requirement, I would recommend resorting to the traditional request/response navigation model.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top