在页面上也选择时不显示 KoGrid答案

【问题标题】：KoGrid not displayed when Select also on page在页面上也选择时不显示 KoGrid
【发布时间】：2016-07-08 10:02:00
【问题描述】：

我有一个 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 开发工具控制台窗口的情况下进行刷新，但没有报告错误。任何想法为什么？

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

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>' }
        ]
    };
};

【问题讨论】：

标签： asp.net-mvc-4 knockout.js kogrid

【解决方案1】：

我能够通过将选择列表移动到单独的 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>
}

【讨论】：

select 标签不能自动关闭 developer.mozilla.org/en-US/docs/Web/HTML/Element/select。所以你需要总是写出结束标签：<select class="form-control" data-bind="options:users, optionsText: 'AdLoginId', value:selectedUser" ></select> 否则你的 HTML 是无效的，KO 无法正确解析它。
再次感谢 nemesv。如果我知道基本的 html，生活会容易得多！如果您可以添加为答案，我将标记为正确

【解决方案2】：

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

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

所以你需要总是写出结束标签</select>：

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

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

【讨论】：