javascript - 选择列表不刷新

Question

我正在尝试使用 ASP.net MVC4 找出 knockoutjs(版本 3.4)

我有以下 View 模型:

function ViewModel(data) {
    var self = this;
    self.filteredColumnsArray;
    var viewsArray = buildSimpleViewsArray(data.AllViews);
    self.views = ko.observableArray(viewsArray);
    self.selectedView = ko.observable(viewsArray[0]);
    self.newView = ko.observable("");

    var columnsArray = ko.observableArray(data.AllColumns);
    self.filteredColumns = ko.observableArray(self.filteredColumnsArray);
    self.columnsToAdd = ko.observableArray();

    self.selectedView.subscribe(function () {
        self.filteredColumnsArray = ko.utils.arrayFilter(columnsArray(), function (column) {
            return column.ViewId === getViewId(self.selectedView());
        });
        self.filteredColumns = ko.observableArray(self.filteredColumnsArray);
    });

    function getViewId(viewName) {
        var id;
        var index;
        for (index = 0; index < data.AllViews.length; ++index)
        {
            if (data.AllViews[index].Name === viewName) {
                id = data.AllViews[index].ViewId;
                }
        }
        return id;
    };

    function buildSimpleViewsArray(objectArray) {
        var simpleArray = new Array;
        for (var o in objectArray) {
            simpleArray.push(objectArray[o].Name);
        }
        return simpleArray;
    }

    function buildSimpleColumnsArray(objectArray) {
        var simpleArray = new Array;
        for (var o in objectArray) {
            simpleArray.push(objectArray[o].Heading);
        }
        return simpleArray;
    }

    self.addView = function () {
        if ((self.newView() != "") && (self.views.indexOf(self.newView()) < 0)) // Prevent blanks and duplicates
            self.views.push(self.newView());
        self.newView(""); // Clear the text box
    };

    self.removeSelected = function () {
        this.views.remove(self.selectedView);
        this.selectedView = "";
    };

    self.saveToDatabase = function () {
        this.views.remove(self.selectedView);
        this.selectedView = "";
    };
};

这个 View :

@model TVS.ESB.BamPortal.Website.Models.UserPrefsViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "User Preferences";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div id="ViewsAndColumns" class="container">
    <div class="row">
        <div id="Views" class="col-md-6 pull-left">
            <span class="label-primary">Views</span>
            <br />
            <table>
                <tr>
                    <td>
                        <span>New View:</span>
                    </td>
                    <td>
                        <input style="width:100px" class="input-sm" data-bind='value:newView, valueUpdate: "afterkeydown"' />
                        <button class="btn-default" data-bind="click:addView, enable:newView().length > 0">Add View</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Views:</span>
                    </td>
                    <td>
                        <select style="width:100px" size="5" data-bind="options:views, value:selectedView"> </select>
                        <button class="btn-default" data-bind="click:removeSelected">Remove</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn-danger" data-bind="click:saveToDatabase">Save to Database</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="Columns" class="col-md-6 pull-right">
            <span class="label-primary">Columns</span>
            <br />
            <table>
                <tr>
                    <td>
                        @*<select multiple="multiple" data-bind="options:filteredColumns, selectedOptions:columnsToAdd"></select>*@
                        <select multiple="multiple" data-bind="options:filteredColumns"></select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>



@section Scripts {
    <script src="~/KnockoutVM/UserPrefs.js"></script>

    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("UserPrefsDiv"));
    </script>
}

虚拟机接收此数据:

{
  "ViewId": 0,
  "Name": null,
  "AllColumns": [
    {
      "ColumnId": 5,
      "ViewId": 5,
      "Heading": "ErpColumn1"
    },
    {
      "ColumnId": 6,
      "ViewId": 5,
      "Heading": "ErpColumn2"
    },
    {
      "ColumnId": 7,
      "ViewId": 6,
      "Heading": "CceColumn1"
    },
    {
      "ColumnId": 8,
      "ViewId": 6,
      "Heading": "CceColumn2"
    }
  ],
  "VisibleColumns": [],
  "AllViews": [
    {
      "ViewId": 5,
      "Name": "erp",
      "Columns": [
        {
          "ColumnId": 5,
          "ViewId": 5,
          "Heading": "ErpColumn1"
        },
        {
          "ColumnId": 6,
          "ViewId": 5,
          "Heading": "ErpColumn2"
        }
      ]
    },
    {
      "ViewId": 6,
      "Name": "cce",
      "Columns": [
        {
          "ColumnId": 7,
          "ViewId": 6,
          "Heading": "CceColumn1"
        },
        {
          "ColumnId": 8,
          "ViewId": 6,
          "Heading": "CceColumn2"
        }
      ]
    }
  ]
}

在我看来，它们是 2 个多行选择框， View 和列。当用户从“ View ”列表中选择一行时，我希望“列”列表仅显示具有适当 View ID 的列。

我想我几乎可以完成这个工作了。使用 Chrome 开发工具，我在 selectedView.subscribe 函数中放置了一个断点，我可以看到 filteredColumnsArray 已正确填充。然后将其分配给可观察数组filteredColumns，该数组绑定(bind)到 View 中的第二个选择列表。我的问题是，第二个列表没有按我的预期刷新。

如有任何帮助，我们将不胜感激。

Answer 1

问题可能是因为您正在为 filteredColumns 创建一个新的 ko.observableArray() ，并且它没有绑定(bind)到 View ，而是用于更改“值”属性的值更改 ko.observable 的值。

前安装了这个:

var x = ko.observable("1st value");
x = ko.observable("2nd value");

这样做:

var x = ko.observable("1st value");
x("2nd value");

在 selectedView 的 subscribe 处尝试一下:

self.selectedView.subscribe(function () {
        var filtered = ko.utils.arrayFilter(columnsArray(), function (column) {
            return column.ViewId === getViewId(self.selectedView());
        });
        self.filteredColumns(filtered)
});