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のdevツールコンソールウィンドウを開いたままでリフレッシュしようとしましたが、エラーは報告されません。なぜどんなアイデア？ここで

はノックアウトビューモデルの関連部分です：

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は表示されません。

selectタグはMDNにも参照自動閉鎖することはできません。

だから、常に終了タグ</select>書き出す必要があります。それ以外の場合はHTMLが無効であるとノックアウトはそれを正しく解釈できない

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

を。

Answer 2

私は仕事の周りのために別の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> 
} 

あなたのHTMLが無効であるため、