Refresh knockout-Kendo view of tabStrip

Question

I'm trying to update view when I add new item in kendoTabStrip . But when I add new item it looks like different DOM elements in one frame.

ViewModel:

VVMStyle = function() {

    function guid() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
            s4() + '-' + s4() + s4() + s4();
    }

    var counter = 0;

    var ItemViewModel = function(id, title, text) {
        var self = this;
        self.id = id;
        self.title = title;
        self.text = text;
        if (counter === 0) {
            self.active = 'k-state-active';
        } else {
            self.active = '';
        }
        counter += 1;
    };

    var ViewModel = {
        items: ko.observableArray([new ItemViewModel(guid(), 'Tab 1', 'Tab 1 text'), new ItemViewModel(guid(), 'Tab 2', 'Tab 2 text')]),
        newTabTitle: ko.observable(''),
        newTabText: ko.observable(''),


        onAdd: function() {
            this.items.push(new ItemViewModel(guid(), this.newTabTitle(), this.newTabText()));
            ko.cleanNode(document.getElementById("availableStylessda"));
            ko.applyBindings(ViewModel, document.getElementById("availableStylessda"));

        }
    };
    //here I use jsrender templates
    new createTemplate(true, 'availableStyles', undefined, onRender);

    function onRender(context) {
        $('#config').append(context);
        ko.applyBindings(ViewModel, document.getElementById("availableStylessda"));
    }
}
new VVMStyle();

Also there is View

<script id="availableStyles" type="text/x-jsrender">
<div id='availableStylessda'>
    <div id ='tabStrip' data-bind= "kendoTabStrip: {}">

        <ul data-bind="foreach: items">
            <li data-bind="attr:{id:id}, css:active, text:title "></li>  
        </ul>

        <!-- ko foreach: items -->
         <div data-bind="attr:{id:id}">
           <span data-bind="text: text"></span>
         </div>
        <!-- /ko -->

    </div>

    <p>
        <label for="newTabTitle">Title</label>
        <input id="newTabTitle" type="text" data-bind="value: newTabTitle, valueUpdate: 'afterkeydown'" />
        <label for="newTabText">Text</label>
        <input id="newTabText" type="text" data-bind="value: newTabText" />
        <button data-bind="click: onAdd, enable: newTabTitle().length">Add</button>
    </p>
</div>

So, when I add new tab (third), then I see nine tabs... What is the best way to update view from model dynamically? In tab's divs will be some more observable dom elements such as inputs, colorPickers and others.

Answer 1

Probably your easiest option is to force the TabStrip to re-render when items are changed. This can be accomplished by wrapping the TabStrip element in a container that would look like:

<div data-bind="with: items">
  <div id ='tabStrip' data-bind= "kendoTabStrip: {}">
    <ul data-bind="foreach: $data">
      <li data-bind="attr:{id:id}, css:active, text:title "></li>
    </ul>

    <!-- ko foreach: $data -->
    <div data-bind="attr:{id:id}">
      <span data-bind="text: text"></span>
    </div>
    <!-- /ko -->
  </div>
</div>

You can then remove your code to cleanNode and rebind, as this will take care of it and destroy the TabStrip properly.

Here is a jsfiddle (without the jsrender bits): https://jsfiddle.net/rniemeyer/344kso0a/