Using "this" in source binding recreates DOM after changing any observable field

2 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 31 Aug 2012 Link to this post

    I have following issue: if "this" keyword used in source binding, MVVM recreates the whole DOM starting from this node if any child value of "this" observable model changes. here is a fiddle to reproduce it: 

    If instead of "this" model member is used, DOM is not recreated, here is another fiddle:

    In this case I could avoid this behavior, but I have following scenario and I could not change data structure:
    I have an array of elements to be bind in a div. But the problem is: each of element has it's own template, stored in field "template", so I could do following:
    <div data-template="element" data-bind="source:elements"></div>
    <script id="element" type="text/x-kendo-template">  
        <div data-template="#=template#" data-bind="source:this"></div>

    this will work, but as I said if any child field of  my view model will be changed, MVVM recreates div with "source:this" binding

    using "#if" inside element template is not an option, templates are huge, and could be used also not only within "elements" binding, so I need to copy/paste them, its dirty. 

    Suggestion: it would be nice something like this:
    <div data-template-field="template" data-bind="source:elements">

    Please help.
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 05 Sep 2012 Link to this post

    Hello Alex,

    By design if a template is bound to the entire viewModel object (data-bind="source: this") on change of a child value the framework will refresh the whole template DOM. Thus is because when you set the value of a child property the change event of the viewModel object fires.
    I am afraid that I cannot suggest another workaround except the one you already found - to bind the template to a model member.

    Alexander Valchev
    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