SPA 淘汰赛 JS 过滤器答案

【问题标题】：SPA Knockout JS FilterSPA 淘汰赛 JS 过滤器
【发布时间】：2012-05-17 05:52:57
【问题描述】：

我使用 ADO.Net 作为数据源开发了 MVC 4 单页应用程序。尝试按 ID 过滤视图，尝试了会话变量，但没有任何运气。查看代码如下：

<script type="text/javascript" src="@Url.Content("~/Scripts/BloodPressuresViewModel.js")"></script>
<script type="text/javascript">
    $(function () {
        upshot.metadata(@(Html.Metadata<KOTest2.Controllers.DALController>()));

        var viewModel = new MyApp.BloodPressuresViewModel({
            serviceUrl: "@Url.Content("~/api/DAL")"
        });
        ko.applyBindings(viewModel);
    });
</script>

hee 是 Javascript 文件中的 calss 代码：

.....
  var entityType = "BloodPressure:#KOTest2.Models";
    MyApp.BloodPressure = function (data) {
        var self = this;

        // Underlying data
        self.ID = ko.observable(data.ID);
        self.PHN = ko.observable(data.PHN);
        self.Day = ko.observable(data.Day);
        self.Systolic = ko.observable(data.Systolic);
        self.Diastolic = ko.observable(data.Diastolic);
        self.HeartRate = ko.observable(data.HeartRate);
        upshot.addEntityProperties(self, entityType);
    }
.....

我认为最好的解决方案是使用 ViewBag 将 ID 从控制器传递给视图。知道我该怎么做！！

由于我不是经验丰富的程序员，是否可以过滤（foreach）

 <tbody data-bind="foreach: bloodPressures">

提前致谢。

【问题讨论】：

不清楚您要做什么。你想过滤什么？看起来您已经在页面上拥有该 ID。
ID在类中，我需要在用户登录时使用ID过滤数据库。谢谢

标签： asp.net-mvc knockout.js single-page-application

【解决方案1】：

我不确定我是否了解您如何访问数据库（在服务器上，对吗？）进行过滤，但您可以执行以下操作：

<table data-bind="foreach: rows">
    <tr>
        <td>id: <span data-bind="text: ID"></span></td>
        <td>PHN: <span data-bind="text: PHN"></span></td>
        ....
    </tr>
</table>

在你的 javascript 中

function viewModel() {
    var self = this;
    this.loggedIn = ko.observable(false);
    this.rows = ko.observableArray([]);

    // return an array of objects to display to the user
    function getDataFromServer() {

         return ...;
    }

    ko.computed(function() {
        if (this.loggedIn())
            this.rows(getDataFromServer());
    },this);

    ...
}

不管你怎么做你的认证，认证成功后，执行this.loggedIn(true)，这将导致计算函数触发从服务器拉取和this.rows()的设置；这反过来会更新显示。

【讨论】：