当 Select 也在页面上时，KoGrid 不显示

Question

我有一个 ASP.Net MVC4 网站。这是问题视图：

@model TVS.ESB.BamPortal.Website.Models.MyTasksViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "My Tasks";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div id="Knockout">
    @*  When select added thenKoGrid does not display! <select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />*@
    <div id="Buttons">
        <span>Reassign to User: <input class="form-control" data-bind="text:username"/></span>
        <button class="btn-default" data-bind="click:promoteState">Promote State</button>
        <button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
    </div>
    <div id="KoGrid" data-bind="koGrid: gridOptions" />


</div>


@section Scripts {
    <script src="~/KnockoutVM/Mytasks.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("Knockout"));
    </script>
}

我已经把问题所在的select注释掉了。如果我保留它，那么它会正常显示，包括我期望的可观察数组中的项目。但是，出于某种原因，KoGrid 没有显示。如果我删除 Select 然后 KoGrid 显示就好了。我尝试使用 Google 开发工具控制台 window 打开进行刷新，但未报告任何错误。有什么想法吗？

以下是 knockout 视图模型的相关部分：

function ViewModel(vm) {
    var self = this;
    this.myData = ko.observableArray(vm.Recs);
    this.selected = ko.observableArray();
    this.users = ko.observableArray(vm.Users);
    this.selectedUser = ko.observable("");
    this.username = ko.observable("");

    this.rows = ko.observableArray(vm.Recs);

    this.gridOptions = {
        data: self.myData,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        filterOptions: self.filterOptions,
        selectWithCheckboxOnly: true,
        selectedItems: self.selected,
        canSelectRows: true,
        displaySelectionCheckbox: true,
        columnDefs: [{ field: 'Timestamp', displayName: 'Timestamp', width: 130 },
                    { field: 'State', displayName: 'State', width: 70 },
                    { field: 'FaultApplication', displayName: 'Application', width: 110 },
                    { field: 'FaultExceptionMessage', displayName: 'Exception Message', width: 400 },
                    { field: 'FaultServiceName', displayName: 'ServiceName', width: 140 },
                    { field: 'LinkToFaultsPage', displayName: 'Link to Fault', width: 80, cellTemplate: '<a data-bind="attr: { href: $parent.entity.LinkToFaultsPage}" >Fault</a>' }
        ]
    };
};

Answer 1

我可以通过将 select 列表移动到单独的 div 并使用 ko.applyBindings 两次来解决问题：

<div id="ControlPanel">
    <select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" />
    <div id="Buttons">
        <span>Reassign to User: <input class="form-control" data-bind="text:username" /></span>
        <button class="btn-default" data-bind="click:promoteState">Promote State</button>
        <button class="btn-default" data-bind="click:reassignTasks">Reassign Task(s)</button>
    </div>
    <div id="KoGrid" data-bind="koGrid: gridOptions" />
</div>

@section Scripts {
    <script src="~/KnockoutVM/Mytasks.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("ControlPanel"));
        ko.applyBindings(vm, document.getElementById("KoGrid"));
    </script>
}

Answer 2

您的 KOGrid 未显示，因为您的 HTML 无效：

select 标签不能自动关闭，另见 MDN。

因此您需要始终写出结束标记 </select>：

<select class="form-control" 
        data-bind="options:users, 
        optionsText: 'AdLoginId', value:selectedUser">
</select>

否则 HTML 无效，Knockout 无法正确解释它。

当 Select 也在页面上时，KoGrid 不显示

KoGrid not displayed when Select also on page

asp.net-mvc-4

knockout.js

kogrid