Question

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

可以这么说，我如何从服务器填充我的可观察数组。我有我想要的2个硬编码数组元素，但我不知道如何将它绑定到后端。

所以至少在我脑海里，虽然如果我说错了，我愿意接受建议。如何使用可从db加载的内容替换这些行。

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

朋友建议我查看淘汰插件映射http://knockoutjs.com/documentation/plugins-mapping.html但不确定如何将其合并到我的示例中。

值得我使用的是PHP＆amp; MySQL也是。

非常感谢任何建议。

Answer 1

你可以这样做（小提琴在镀铬中不起作用）

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));

Answer 2

是的，你的朋友是对的，mapping.fromJS很适合将原始JSON转换为具有observables的对象。为了以防万一，请记住，如果您需要在客户端更新数据，则必须使用observable。如果您只想显示数据，则不需要观察数据。

简单视图模型：

// 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());

See working fiddle

我希望它有所帮助。

如何使用映射插件将knockout绑定到后端？

2 个答案: