javascript - 隐藏和取消隐藏koGrid元素

我最近开始使用koGrid，我非常喜欢它的几乎所有内容-除了如果在页面首次加载时隐藏它的情况，将会给您带来极大的麻烦。

我整理了一个jsfiddle来演示我在说什么:

http://jsfiddle.net/smithkl42/L5uGT/3/

<div>
    <div data-bind="visible:visible">
        <div id="grid1" style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </div>
    <br/>
    <div>
        <div style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </div>
    <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>

和:

$(function () {
    function vm() {
        var self = this;
        self.myObsArray = ko.observableArray([{
            firstName: 'John',
            lastName: 'Doe'
        }, {
            firstName: 'Jane',
            lastName: 'Doe'
        }]);

        self.visible = ko.observable(false);
        self.toggleFirstGrid = function(){
            self.visible(!self.visible());
        }
    };
    ko.applyBindings(new vm());
});

如果我设置了两个完全相同的网格，但是在页面加载时隐藏了第一个网格，那么当它被隐藏时，它看起来会显得很奇怪。

据我所知，这是一个已知问题:

https://groups.google.com/forum/#!msg/knockoutjs/wHpGSUi_Nfo/3i4LY1CMLfkJ

但是上面的线程中提到的解决方法不适用于此特定问题，如您在此jsfiddle中所看到的:

http://jsfiddle.net/smithkl42/L5uGT/4/

有没有人找到合适的解决方法？

最佳答案

尝试将可见的绑定(bind)移动到koGrid DIV标签本身。这似乎有效。

<div>
  <div style="width: 50%; height: 200px;" data-bind="visible:visible, koGrid: { data: myObsArray, footerVisible:false }"></div>
  <br/>
  <div style="width: 50%; height: 200px;" data-bind="koGrid: { data: myObsArray, footerVisible:false }"></div>
  <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>

http://jsfiddle.net/6abwy/

关于javascript - 隐藏和取消隐藏koGrid元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18131678/