Templates with Javascript do not update without explicit change event

2 posts, 0 answers
  1. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 13 Nov 2013 Link to this post

    Using this JSON...

    {
        Name: "Top Level",
        Collection: [
            First: [
              {
                Name: "Child",
                Size: 8,
                onIncrease: function(e){
                    var current = e.data.get("Size");
                    e.data.set("Size", current += 1);
                }
              }
            ]
        ]
    }

    With this template
    <div data-template="tmpl-boxes-for-size" data-bind="source: Collection.First"></div>
    <script type="text/html" id="tmpl-boxes-for-size">
        <div class="k-rails">
            <div class="k-item-reduce"></div>
            # for(var index = 0; index < data.Size; index++ ) { #
                <div class="k-rails-item"
                     style="text-align: center;
                            font-size: 20px;
                            vertical-align: middle;">
                    #= index + 1 #
                </div>
            # } #
            <div class="k-item-increase" data-bind="click: onIncrease"></div>
        </div>
    </script>


    The DOM will not update when the code runs and increases the size, without an explicit call to the change event.

    I am including the CSS classes used too, just for your convenience.
    .k-item-reduce {
        float: left;
        width: 0px;
        height: 0px;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-right: 8px solid #ccc;
    }
    .k-item-increase {
        float: left;
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
         
        border-left: 8px solid #ccc;
    }
     
    .k-rails {
        position: relative;
     
        &:after {
            clear: both;
        }
     
        .k-rails-item {
            float: left;
            display: block;
            margin: 2px;
            height: 24px;
            width: 24px;
            border: dashed 1px #ccc;
        }
    }
    Running it with the following code will get it to work, but it is a bit obtuse. I would prefer if it just worked like other updates.
    {
        Name: "Top Level",
        Collection: [
            First: [
              {
                Name: "Child",
                Size: 8,
                onIncrease: function(e){
                    var current = e.data.get("Size");
                    e.data.set("Size", current += 1);
                    viewModel.trigger("change", { field: "Collection" });
                }
              }
            ]
        ]
    }


  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 15 Nov 2013 Link to this post

    Hi Stacey,

    the behavior you describe is expected. Using the template syntax does not build an MVVM dependency to the Size property; in a nutshell, the tmpl-boxes-for-sale repeater is not aware that it should re-draw itself when the Size changes. The workaround you have applied does not seem to cause any harm, though. 

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