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