KoGrid wird nicht angezeigt, wenn auch auf Seite

Question

Ich habe eine ASP.Net MVC4-Website. Hier ist das Problem Ansicht:

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

kommentierte ich habe aus der wählen, die das Problem verursacht. Wenn ich das hier belasse, wird es gut angezeigt, einschließlich der Objekte aus dem beobachtbaren Array, die ich erwarten würde. Aus irgendeinem Grund wird das KoGrid dann jedoch nicht angezeigt. Wenn ich die Select entferne dann zeigt das KoGrid einwandfrei. Ich habe versucht, das Google-Tool für die Dev-Tool-Konsole zu aktualisieren. Es wurden jedoch keine Fehler gemeldet. Irgendwelche Ideen warum?

sind hier relevanten Teile des Knockout-View-Modell:

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

Ihre KOGrid wird nicht angezeigt, weil Ihre HTML ungültig ist:

Die select Tag kann nicht sein, selbstschließ auch auf MDN.

Sie müssen also immer </select> den schließenden Tag schreiben:

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

Andernfalls wird der HTML ist ungültig und Knockout es nicht richtig interpretieren kann.

Answer 2

ich war in der Lage zu umgehen, indem Sie die Auswahlliste zu einem separaten div bewegen und mit den ko.applyBindings zweimal:

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