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

取自两个表 - 服务器从 'users' 和 'meals' 表中返回行作为一个 json - 这些由 'users' 表中的外键“meal_id”连接。

我也可以这样获取这些数据：

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

现在我想用这些数据显示一个简单的表格：

name | surname | meal name | meal price

其中“膳食名称”是从“self.meals”和当前用户“meal.id”中选择的选项。

我对“膳食价格”有疑问 - 它应该会随着“膳食名称”选择更改而自动更改，但我不知道该怎么做。

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

（在 data-bind="foreach: users" 内:)

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

见fiddle