javascript - KO 网格显示问题，在调整网格大小时显示一行。还包括图像

Question

使用以下内容。

1) Visual Studio 2012。2) Hot Towel 模板。3) 下载 ko grid 及其 css。

主页.html

<section id="alerts-view" class="view">
 <header>
        <a class="btn btn-info btn-force-refresh pull-right" 
            data-bind="click: refresh" href="#"><i class="icon-refresh"></i> Refresh</a>
        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: alerts().length"></address>
            <address>found</address>
        </div>
    </header>
    <div  data-bind="koGrid: gridOptions"></div>
  </section>

首页.js

define(['services/datacontext', 'durandal/plugins/router'],
    function (datacontext, router) {

        var alerts = ko.observableArray();
        isAttachedToView = ko.observable(false);

        var activate = function (routeData) {
            if (routeData.id == undefined)
                return datacontext.getAlerts(alerts);
        };

        var deactivate = function () {
            isAttachedToView(false);
            alerts([]);
        };

        var refresh = function () {
            return datacontext.getAlerts(alerts);
        };


       var vm = {
            activate: activate,
            deactivate: deactivate,
            refresh: refresh,
            alerts: alerts,
            gridOptions: {
                            data: alerts,
                            canSelectRows: true,
                            enableColumnResize: true,
                            footerVisible: true,
                            displaySelectionCheckbox: true,
                            enableSorting: ko.observable(true),
                            columnDefs: [
                                            { field: 'efficency', displayName: 'Green or C02 Bus' } ......................

                                        ]

                           },
            isAttachedToView: isAttachedToView,
            title: 'Current Alerts'
        };
       return vm;


       function viewAttached() {
           isAttachedToView(true);
           return true;
       }
    });

捆绑配置。

bundles.Add(
new StyleBundle("~/Content/css")

//.Include("~/Content/ie10mobile.css")
//.Include("~/Content/bootstrap.css")
//.Include("~/Content/bootstrap-responsive.css")
//.Include("~/Content/font-awesome.css")
//.Include("~/Content/durandal.css")
.Include("~/Content/toastr.css")
//  .Include("~/Content/app.css")
.Include("~/Content/KoGrid.css")
//  .Include("~/Content/jquery-ui-1.9.1.custom.css")

);

第二张图片 我不知道出了什么问题或我在这里做错了什么，但看起来像以下两张图片。

首先看不到任何网格。调整窗口大小你看到网格但只有一行。尝试在 G 绿色总线上分组，然后当你想让山口变大时，第二个山口开始移动，而不是第一个。

是否有一些可以与 Hottowel 模板和 kogrid 一起工作的东西或示例我可以下载和使用？

看起来像小学生的错误，但很难发现和推理。

Answer 1

我也遇到了这个问题。奇怪的是，视口(viewport) div(由类名为 kgViewport 的 kogrid 生成的那个)似乎设置为 20 像素的固定高度。

作为解决方法，我让 jQuery 为我修复了这个问题(我的 View 模型中的最后一行):

$("div.kgViewport").css("height", "inherit");