1

私はノックアウトjsを初めて使用し、その利点/可能性を見ることができます。かなり単純な質問だと思います。

いわば、サーバーから監視可能な配列にデータを入力するにはどうすればよいですか。ハードコードされた 2 つの配列要素を操作したいのですが、それをバックエンドに結び付ける方法がわかりません。

ここにjsfiddleがありますhttp://jsfiddle.net/P9LLL/

したがって、少なくとも私の頭の中では、間違っている場合は提案を受け付けています。これらの行をデータベースからロードできるものに置き換えるにはどうすればよいですか。

new SeatReservation("Bandaid",  10),
new SeatReservation("Bandages", 12)

ノックアウト プラグイン マッピングhttp://knockoutjs.com/documentation/plugins-mapping.htmlを見るように友人から提案されましたが、それを私の例に組み込む方法がわかりません。

それだけの価値があるため、私はPHPとMySQLも使用しています。

ご提案いただきありがとうございます。

4

2 に答える 2

0

はい、あなたの友人は正しいです。mapping.fromJS は生の JSON をオブザーバブルを持つオブジェクトに変換するのに適しています。念のため、クライアント側でデータを更新する必要がある場合は、オブザーバブルが必要であることを覚えておいてください。データのみを表示したい場合は、オブザーバブルは必要ありません。

単純なビュー モデル:

// raw data from DB
var raw = [{
    itemName: "Item1",
    defaultQuantity: 10
}, {
    itemName: "Item2",
    defaultQuantity: 12
}];


function SeatReservation(item) {
    var self = this;
    // converts each property (of item) into observable and set it to self.
    ko.mapping.fromJS(item, {}, self);

    // fromJS creates these observables for you:
    // self.itemName = ko.observable(item.itemName)
    // self.defaultQuantity= ko.observable(item.defaultQuantity)

}

function ReservationsViewModel() {
    var self = this;

    // Converts each item into a SeatReservation (Like a Select in MySql)
    self.kits = ko.utils.arrayMap(raw, function (item) {
        return new SeatReservation(item);
    });
}

ko.applyBindings(new ReservationsViewModel());

作業フィドルを参照してください

お役に立てば幸いです。

于 2013-06-23T11:11:45.783 に答える
0

このようにすることができます (Fiddles は chrome では動作しません)。

http://jsfiddle.net/P9LLL/1/

function ReservationsViewModel(data) {
    this.kits = ko.observableArray();

    ko.mapping.fromJS(data, {}, this);
}

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10 },{ itemName: "Item2", defaultQuantity: 12 } ] };
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend));

これにより、キット内の各アイテムの動的タイプが作成されます。これらに計算された関数やその他の関数を適切な方法で追加することはできません。代わりに、

http://jsfiddle.net/P9LLL/2/

function SeatReservation(data) {    
    ko.mapping.fromJS(data, {}, this);
    this.total = ko.computed(function() {
       return this.price() * this.defaultQuantity();
    }, this);
}


function ReservationsViewModel(data) {
    this.kits = ko.observableArray();
    var mapping = {
        kits: {
            create: function(options) {
                return new SeatReservation(options.data);
            }
        }
    };

    ko.mapping.fromJS(data, mapping, this);
}

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10, price: 2 },{ itemName: "Item2", defaultQuantity: 12, price: 5 } ] };
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend));
于 2013-06-23T11:08:55.147 に答える