Templates with Javascript do not update without explicit change event

[Stacey]

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" });
            }
          }
        ]
    ]
}

[Petyo]

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