1

我是 knockoutjs 的新手，可以看到它的好处/潜力。我有一个我认为很简单的问题。

可以这么说，我如何从服务器填充我的可观察数组。我已经得到了我想要使用 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 转换为带有 observables 的对象。以防万一，请记住，如果您需要在客户端更新数据，则需要使用 observables。如果您只想显示数据，则不需要观察对象。

简单视图模型：

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

你可以这样做（小提琴在 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 回答