0

警告——我对淘汰赛很陌生。我认为我做这一切都是错的，但我觉得我很接近。

所以我的总体目标是让示例服务器数据进入并绑定到该数据。如果用户执行某些操作，我还希望能够更改传入的数据。在这种情况下，他们正在批准/拒绝项目。现在，我的示例过滤掉了“启动”上的数据，就像我期望的那样，但是当我尝试更改项目的接受/拒绝值时，我的 UI 不会更新。因此，一旦用户执行某些操作，我就很难让我的 UI 自动“重新过滤”数据。

这是我目前的视图模型：

function FilterDataViewModel() {
var self = this;

this.data = ko.observableArray(sampleData);
$.each(this.data(), function(idx, item){
    item.myApproved = ko.observable(item.approved);

    item.canApprove = ko.computed(function() {
        return item.myApproved() === undefined;
    });

    item.approve = function() {
        item.myApproved(true);
    };

    item.canReject = ko.computed(function() {
        return item.myApproved() !== false;
    });

    item.reject = function() {
        item.myApproved(false);
    };
});   

self.incoming = ko.computed(function() {
    return ko.utils.arrayFilter(this.data(), function(item) {
        return item.approved === undefined;
    });
}, this);

self.accepted = ko.computed(function() {
    return ko.utils.arrayFilter(this.data(), function(item) {
        return item.approved === true;
    });
}, this);

self.rejected = ko.computed(function() {
    return ko.utils.arrayFilter(this.data(), function(item) {
        return item.approved === false;
    });
}, this);    
  }

对此感觉不对的是我正在扩展我的 foreach 循环中的每个元素。我确信有更好的方法来做到这一点。

这是我的示例数据：

var sampleData = [{
        "id": "9f86615a-2ec2-43dd-a6a1-99d3a4501969",
        "textData": "Tincidunt accumsan erat delenit nostrud dolor, ullamcorper tincidunt feugait vel feugait, dolor nulla luptatum et. Aliquip, nulla vel commodo aliquam dolore, sit tincidunt nulla dolor blandit, in lorem commodo. Feugait illum, consectetuer dolore tincidunt feugait in, duis aliquip.",
        "approved": undefined,
        "lastUpdatedTime": "2005-05-23T20:39:50 +05:00"
    },
    {
        "id": "141ad8d4-d13e-4887-92ab-8e6785e47c4f",
        "textData": "Aliquip diam odio ut volutpat ex, ut ad nulla blandit lorem, vero aliquam accumsan odio. Nonummy, dolore ut autem erat eros, dolore feugiat et elit volutpat, molestie amet praesent..",
        "approved": false,
        "lastUpdatedTime": "2010-12-12T13:00:54 +06:00"
    },
    {
        "id": "0c84b35c-6cac-4dc7-8798-91a12e27a2ce",
        "textData": "Delenit erat dolore vel ut accumsan, ad feugiat quis consequat laoreet, volutpat hendrerit feugiat nibh. Ea, hendrerit ad exerci commodo nostrud, sit vel in at elit, magna ullamcorper consequat. Wisi sit, laoreet odio consequat nisl ipsum, euismod minim consequat magna tincidunt, eros duis..",
        "approved": true,
        "lastUpdatedTime": "1993-08-20T22:14:50 +05:00"
    },
    {
        "id": "8a29682f-0b90-427f-9627-036dbe2f0191",
        "textData": "Zzril accumsan nonummy duis hendrerit eu, tincidunt nibh ea in nostrud, minim vel consectetuer consectetuer. Augue, nisl qui ipsum erat vel, odio eum.",
        "approved": true,
        "lastUpdatedTime": "1994-10-10T02:06:48 +05:00"
    },
    {
        "id": "461dab99-5ac7-4e31-8c56-b7703af050d0",
        "textData": "Nonummy dolor laoreet in exerci ut, ut ea hendrerit ut at, zzril exerci iusto ullamcorper. Nostrud, nisl nulla in facilisis luptatum, facilisis augue.",
        "approved": true,
        "lastUpdatedTime": "1997-04-10T05:18:15 +05:00"
    }];

这是我的尝试：http: //jsfiddle.net/Traviguy9/j3WTN/

我尝试使用 ko.mapping.fromJS 直接从传入的数据生成视图模型，但这似乎从未正确创建对象，所以我放弃了。

重申一下——我想读入该示例数据并将其过滤掉，然后让用户更改一些值，当他们这样做时，我会像我的 UI 一样重新过滤数据。

此外，approved 是 3 种状态：undefined 是未触及，true 是批准，false 是拒绝

更新——我确实通过让我的传入/接受/拒绝计算值使用'myApproved'而不仅仅是'approved'来让它工作。我仍然想知道是否有更好的方法来“扩展”服务器数据。

4

0 回答 0