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无效，Knockout无法正确解释。

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

当页面上也选择时，KoGrid不显示

2 个答案: