javascript - knockout : computed observables in cascaded arrays (complex viewmodel) and the this-pointer

Question

编辑:按照建议，我重构了我的 View 模型:
- 使用构造函数
- 使用子“事物”

这是 fiddle :http://jsfiddle.net/drchef/hSMkc/1/

现在，计算正在工作；)thx

但是还有一个问题:如果我更改食物值，这些值不会返回到模型中。元数据正在工作，但食物值(value)却没有。 (因此总数不会更新)

P.S.:抱歉，我是新来的……我应该开始一个新问题吗？

================================================== ===========

首先，我发布我的 View 模型;)

var vm = function() {

var self = this;    

this.activeRow = ko.observable(0);
this.user = 'hungry guy';

this.foods = ['pizza', 'burger', 'chilli'];
this.meetings = [
    {year: 2014, types: [{type: "until now", hidden: false}, {type: "forecast", hidden: false}]},
    {year: 2015, types: [{type: "forecast", hidden: false}]}
];

this.lines = ko.observableArray([
    {   id: 1,
        meta: ko.observable(
            {   shop: ko.observable('foodstore'),
                tel: ko.observable('123 456'),
                url: ko.observable('foodstore24.com')
            }),
        meetingValues: ko.observableArray([
            {   productValues: ko.observableArray([
                    {productValue: ko.observable(1)},
                    {productValue: ko.observable(0)},
                    {productValue: ko.observable(1)}]),
                total: ko.computed(function() {
                    //console.log(this.lines) -> expected: array output -> actual: undefined
                    //console.log(this.lines()) -> expected: array output -> actual: error, this.lines() ist not a function
                    //console.log(this) -> expected: this == self -> actual: this == self
                    return 0;
                }, this)
            },
            {   productValues: ko.observableArray([
                    {productValue: ko.observable(3)},
                    {productValue: ko.observable(2)},
                    {productValue: ko.observable(5)}]),
                total: ko.computed(function() {
                    return 0;
                })
            },
            {   productValues: ko.observableArray([
                    {productValue: ko.observable(2)},
                    {productValue: ko.observable(2)},
                    {productValue: ko.observable(3)}]),
                total: ko.computed(function() {
                    return 0;
                })
            }
            ])
    }
]);

};

好吧，我必须对这个模型说几句话。

这是我的复杂的knockoutjs 模型。我应用它:

ko.applyBindings(new vm());

该模型拥有 1 个“线”。 this.lines 是一个数组，可以容纳更多内容，但对于这个问题，这一行就足够了。

this.foods 和 this.meetings 是结果表的标题。该表如下所示:

| 2014                                                              | 2015
| until now                       | forecast                        | forecast
| pizza | burger | chilli | total | pizza | burger | chilli | total | pizza | burger | chilli | total |
|     1 |      0 |      1 |     0 |     3 |      2 |      5 |     0 |     2 |      2 |      3 |     0 |

这有点难以解释，但有了表和虚拟机，我认为这是可以理解的;)

this.user/foods/meetings 是不可观察的，因为它们在客户端永远不会改变。

正如您在虚拟机中看到的，有关于我的问题的评论。在“总计”列中，我想要三种食物的总和。 (回程披萨+汉堡+辣椒)但这不起作用，因为“这个”不起作用。我无法访问这些值。

有人可以向我解释一下这个问题吗？这个 View 模型是好的做法吗？

我正在使用knockout.js.3.1.0。

谢谢你的回答格鲁斯

P.S.:如果有人不明白这个问题，请问我；)

Answer 1

您有一个用于 View 模型的普通 JS 对象。如果这样做，就很难正确计算和管理this。我建议您的 subview 模型也使用构造函数，这将使这些(以及许多其他)问题和困难情况消失。 KO documentation has some info 对此。这也可能会澄清 self=this 的用途(您的主虚拟机代码中有它，但不要使用它)。

如果您已经/想要坚持使用纯 JS 对象，那么我建议在创建主要可观察对象后添加计算对象。像这样的事情:

this.lines = ko.observableArray([
    {   id: 1,
        meta: ko.observable(
            {   shop: ko.observable('foodstore'),
                tel: ko.observable('123 456'),
                url: ko.observable('foodstore24.com')
            }),
        meetingValues: ko.observableArray([
            {   productValues: ko.observableArray([
                    {productValue: ko.observable(1)},
                    {productValue: ko.observable(0)},
                    {productValue: ko.observable(1)}])
            }
            //etc
            ])
    }
]);

// See note, below code
this.lines()[0].meetingValues()[0].total = ko.computed(function() {
    //console.log(this.lines) -> expected: array output -> actual: undefined
    //console.log(this.lines()) -> expected: array output -> actual: error, this.lines() ist not a function
    //console.log(this) -> expected: this == self -> actual: this == self
    return 0;
}, this.lines()[0].meetingValues()[0]);

注意:上面的示例仅为一个 meetingValues 设置了total，您必须使用循环将计算结果添加到所有这些值中。这也是我建议对 View 模型使用构造函数的原因之一，因为它使管理 this 和计算通常变得更加容易。