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/Travyguy9/j3WTN/

ko.mapping.fromJS を使用して、入ってくるデータから直接ビューモデルを生成しようとしましたが、オブジェクトを適切に作成していないようだったので、それから離れました。

繰り返しますが、そのサンプル データを読み込んでフィルターで除外し、ユーザーが値を変更できるようにしたいと考えています。

また、承認済みは 3 つの状態です: undefined はそのまま、true は承認済み、false は却下されます。

更新 - 受信/承認/拒否された計算値に「承認済み」だけでなく「myApproved」を使用させることで、機能するようになりました。サーバーデータを「拡張」するためのより良い方法があるかどうかはまだ疑問です。

4

0 に答える 0