javascript - 刷新tabStrip的 knockout -Kendo View

我在kendoTabStrip中添加新项目时试图更新 View 。但是，当我添加新项目时，它在一帧中看起来像是不同的 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();

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

因此，当我添加新标签(第三个)时，我会看到九个标签...
从模型动态更新 View 的最佳方法是什么？在tab的div中将有一些更可观察的dom元素，例如输入，colorPickers等。

最佳答案

可能最简单的选择是在更改项目时强制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并重新绑定(bind)，因为这会处理好并正确销毁TabStrip。

这是一个jsfiddle(没有jsrender位):https://jsfiddle.net/rniemeyer/344kso0a/

关于javascript - 刷新tabStrip的 knockout -Kendo View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39829169/