タブストリップの更新ノックアウト剣道

Question

kendoTabStripに新しいアイテムを追加すると、ビューを更新しようとしています。しかし、新しいアイテムを追加すると、1つのフレームに異なるDOM要素のように見えます。

の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(); 

またビュー

がある

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

だから、私は新しいタブ（第3）を追加するとき、私は何9つのタブ... を見ますモデルから動的にビューを更新する最善の方法は？タブのdivには、input、colorPickersなどのより多くの観測可能なdom要素があります。

Answer 1

おそらく最も簡単な選択肢は、アイテムが変更されたときにTabStripを再レンダリングさせることです。これは次のようになり、容器内のTabStrip要素をラップすることによって達成することができます。これはそれの世話をし、適切TabStripを破壊するよう

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

あなたは、その後、cleanNodeにあなたのコードを削除して再バインドすることができます。

ここにはjsfiddle（jsrenderビットなし）があります。https://jsfiddle.net/rniemeyer/344kso0a/