刷新 tabStrip 的淘汰賽-劍道視圖

Question

當我在kendoTabStrip添加新項目時，我正在嘗試更新視圖。 但是當我添加新項目時，它看起來像是在一幀中不同的DOM元素。

視圖模型：

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>

因此，當我添加新選項卡（第三個）時，我會看到九個選項卡......從模型動態更新視圖的最佳方法是什么？ 在選項卡的 div 中將有一些更可觀察的 dom 元素，例如輸入、colorPickers 等。

Answer 1

可能您最簡單的選擇是在項目更改時強制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並重新綁定，因為這將處理它並正確銷毀TabStrip 。

這是一個 jsfiddle（沒有 jsrender 位）： https ://jsfiddle.net/rniemeyer/344kso0a/