kendo-ui - Typescript with Kendo MVVM - 声明为可观察还是不可观察？

Question

将 Kendo MVVM 与 Typescript 一起使用基本上是令人愉快的，但我之前遇到过一个问题，并且它再次出现......有关更多详细信息，请参阅此问题关于原作。

Typescript with Kendo MVVM

一般问题是我需要将数组定义为 kendo.data.ObservableArray。现在这是我遇到的问题......

我不明白什么时候应该将属性声明为可观察的，或者只是将其保留为正常并让过程自然。事实上，我对整个磨难感到非常困惑。举个例子...

export class Prototype  {
    public Editing: boolean = false;
    public Id: string = "";
    public Name: string = "";
    public Mutations: any[] = [];
    public Tags: any[] = [];
    public Conditions: any[] = [];

    };
}

var viewModel = kendo.observable(new Prototype());
viewModel.Mutations.push({ // new data // });

这可行。这对我来说真的很困惑，因为我没有像原始示例中那样扩展 ObservableObject 。如果打印 View 模型，我可以看到所有数组都转换为 ObservableArray，这正是我想要的。

但后来，我遇到了类似的情况，程序的嵌套部分更多......

export class Condition {
    public Label: string = "Pushed Condition";
    public Parts: observableArray = kendo.observableHierarchy([]);

    constructor(data?: any, mapped?: any) {
        for (name in mapped) {
            this[name] = mapped[name];
        }

        for (name in data) {
            this[name] = data[name];
        }
    }

    public onRemove(e) {
        e.data.parent().remove(e);
    }

    public Push(data: any) {
        data.onRemove = e => {
            e.data.parent().remove(e);
        };
        this.Parts.push(data);
    }
}

现在这就是它彻底让我大吃一惊的地方。这些对象之一被创建为 ObservableArray 上的属性，但随后它不会变成可观察对象。所以以下...

$mutation.Conditions.push(new Condition());

不具有可观察的行为，并且不更新。我必须明确地这样做...

$mutation.Conditions.push(kendo.observable(new Condition()));

但在向 Mutations[] 集合添加内容时，我通常不需要这样做。我可以走了...

viewModel.Mutations.push(new Mutation());

一切都很好。

它与 Condition 的 Parts 数组进一步混淆。如果我将其声明为 any[]，它就不起作用 - 即使我使用 kendo.observable 创建条件。我能够使其工作的唯一方法是将其显式声明为 ObservableArray。

谁能帮我理解这一点？我让程序按照我想要的方式工作，但我非常困惑，我发现在不同的地方以不同的方式声明这些确实很迟钝，我不喜欢它。随着时间的推移，这将使我的代码更难维护。

Answer 1

由于您实际上有三个问题，所以我将分为三个部分来回答。

第 1 部分

在第一个示例中，您将整个 Prototype 包装为可观察的。因此，Kendo 将确保其所有属性也是可观察的。您通过打印结果确认了这一点。这也提到了on the kendo.observableObject docs :

Important: Complex fields are automatically wrapped in nested ObservableObject instances. Array fields are wrapped as kendo.data.ObservableArray objects. The change event of the child objects will bubble to the parent ObservableObject. Fields, which name are prefixed with an underscore will not be wrapped.

第 2 部分

在你的第二个例子中，我无法判断 $mutation.Conditions 是否是可观察的数组？在后一种情况下，这就是问题所在。它不会更新，因为您正在推送到 native 数组，该数组不会将其项目包装为可观察值。如果是这样，我需要查看 mutation 类的源代码(假设您有这样的类？)。

第 3 部分

您将 kendo.observableHierarchy 分配给 Parts。因此，您不能将 Parts 声明为 any[]，因为 kendo.observableHierarchy 不是数组，而是对象。您可以将 Parts 声明为 any 但我想知道为什么您不强类型化您的代码？将其声明为 observableArray 有什么问题吗？

我希望这能够揭开正在发生的事情的神秘面纱。