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> 
} 

我已经注释掉选择，使该问题。如果我放弃这个，那么它会显示正常，包括我期望的可观阵列中的项目。但是，由于某种原因，KoGrid没有显示出来。如果我删除选择然后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>' } 
     ] 
    }; 
}; 

Answer 1

您KOGrid不显示，因为你的HTML是无效的：

的select标签不能自闭也看到MDN。

所以你需要经常写出来的结束标记</select>：

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

否则，HTML是无效的，淘汰赛不能正确地解释它。

Answer 2

我能够选择列表移动到一个单独的股利和使用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> 
}