Knockout.js -处理由外键连接的表中的数据

Question

作为Knockout.js的初学者，我在处理由外键连接的表中的数据时遇到了问题。

假设我们有这样一个简单的代码：

function AppViewModel() {
    var self = this;

    self.users = ko.observableArray([
        {id: 0, name: "Willi", surname: "Jederman", meal: {id: 1, name: "Orange", price: 25.00}},
        {id: 1, name: "Hans", surname: "Kloss", meal: {id: 2, name: "Carrot", price: 300.00}}
    ]);

    self.meals = ko.observableArray([
        {id: 0, name: "Apple", price: 10.00},
        {id: 1, name: "Orange", price: 25.00},
        {id: 2, name: "Carrot", price: 300.00}
    ]);

    self.addUser = function() {
        self.users.push({id: null, name: "", surname: "", meal: {id: 0, name: "Apple", price: 10.00}});
    };    

    self.removeUser = function(user) {
        self.users.remove(user);
    };
}

ko.applyBindings(new AppViewModel());

数据：

{id: 0, name: "Willi", surname: "Jederman", meal: {id: 1, name: "Orange", price: 25.00}}

从两个表--服务器作为一个json从‘用户’和‘餐’表返回行--它们由'users‘表中的外键"meal_id“连接。

我还可以将这些数据获取为：

{id: 0, name: "Willi", surname: "Jederman", meal_id: 1}

现在，我希望用这些数据显示一个简单的表：

name | surname | meal name | meal price

其中‘餐名’是一个选择，选择从'self.meals‘和当前用户'meal.id’选择。

我对“餐价”有一个问题--它应该会随着“餐名”的选择而自动改变，但我不知道该如何做。

我的“餐名”选项如下所示：

(在一个数据-bind=“foreach:user”：)

<select data-bind="options: $root.meals,
                   optionsValue: 'id',
                   optionsText: 'name',
                   value: meal.id"></select>

我不知道我该给‘餐价’什么装订？我知道，它应该从‘data-bind=’text：‘开始。

谢谢你的帮助。

Answer 1

您需要这样的用户类

function User(user, root) {

    this.id = ko.observable(user.id);
    this.name = ko.observable(user.name);
    this.surname = ko.observable(user.surname);
    this.mealId = ko.observable(user.mealId);

    this.root = root;

    this.currentMeal = ko.computed(function () {
        var mealId = this.mealId();
        return ko.utils.arrayFirst(this.root.meals, function(item) {
            return item.id === mealId;
        });
    }, this);
}

注意，currentMeal是计算出来的，它从根模型数据中通过它的id查找膳食。

使用root参数实现模型的С

function AppViewModel() {

    this.meals = [
        { id: 0, name: "Apple", price: 10.00 },
        { id: 1, name: "Orange", price: 25.00 },
        { id: 2, name: "Carrot", price: 300.00 }
    ];

    this.users = ko.observableArray([
        new User({id: 0, name: "Willi", surname: "Jederman", mealId: 1}, this),
        new User({id: 1, name: "Hans", surname: "Kloss", mealId: 2}, this)
    ]);

    this.addUser = function() {
        this.users.push(new User({id: null, name: "", surname: "", mealId: 0}), this);
    };    

    this.removeUser = function(user) {
        this.users.remove(user);
    };
}

请参阅小提琴