This is a migrated thread and some comments may be shown as answers.

Templates with Javascript do not update without explicit change event

1 Answer 14 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 13 Nov 2013, 06:09 PM
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" });
            }
          }
        ]
    ]
}


1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 15 Nov 2013, 10:01 AM
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!
Tags
MVVM
Asked by
Stacey
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or