Question

警告 - 我是淘汰赛的新手。我认为我这样做是错的，但我觉得我很接近。

所以我的总体目标是让示例服务器数据进入并绑定到该数据。我还希望能够在用户执行某些操作时更改进来的数据。在这种情况下，他们批准/拒绝项目。现在我的示例过滤掉了“启动”上的数据，就像我期望的那样，但是当我尝试更改项目的接受/拒绝值时，我的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/Travyguy9/j3WTN/

我尝试使用ko.mapping.fromJS直接生成视图模型，但是从来没有正确地创建一个对象，所以我离开了。

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

此外，已批准为3状态：未定义未更改，true为已批准，false为拒绝

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

无法使用服务器数据更新我的knockout绑定

0 个答案: