kendo-ui - 使用 TypeScript 的 Kendo UI MVVM - 将 ViewModels 设置为 "classes"

Question

我正在将一个项目过渡到 Typescript，它使用 Kendo UI 的 MVVM 架构。但是，我对类的概念及其与 View 模型的关系有点疑问。

我将建立一个类并扩展 kendo.data.ObservableObject，这是您创建 View 模型的基础，并用我的字段填充它，就像这样。

export class ViewModelSample extends kendo.data.ObservableObject {
   Id: string = null;
   Name: string = null;
   Items: kendo.data.ObservableArray = [];
   // other fields
   constructor() {
      super();
   }

   map(params){
      // some code
   }
}

基本上这个类代表我的 View 模型，封装得很好。所以我这样召唤它；

var viewModel = new ViewModelSample();
kendo.bind($('#binding-area'), viewModel);

这工作得很好，但行为变得有点尴尬。例如，如果我在类中有一个集合并向其推送内容，则用户界面不会更新。

如果我在普通的 javascript 中执行此操作，它就可以工作；

viewModel.Items.push(new Item(/* parameters */));
// view model updates, and user interface updates

但是，如果我在 typescript 中这样做， View 模型会更新，但 DOM 不会。我必须手动输入 ...

viewModel.Items.trigger('change');

为了让 UI 更新。

谁能帮我理解为什么会这样？

Answer 1

我也遇到过这个问题，其实是TypeScript生成JS的方式问题。

在普通的 JS 中，你可以这样做:

new kendo.ObservableObject({
    items: []
});

并且构造函数会自动将 items[] 包装到一个新的 ObservableArray 中。

但是该行为在 TypeScript 中失败，因为代码:

export class ViewModelSample extends kendo.data.ObservableObject {
    Items: kendo.data.ObservableArray = [];

    constructor() {
       super();
    }

实际上会生成如下内容:

function ViewModelSample() { // constructor
    _super.call(this);       // call to ObservableObject constructor (super())
    this.Items = [];         // add Items to this.
}

因此 Items 属性直到 ObservableObject 构造函数被调用后才添加到 ViewModel 中，所以 Kendo 不知道它，也不会换行它变成一个 ObservableArray。

排序与 Kendo 对普通 JavaScript 的期望正好相反。

@Anzeo 关于手动将 Items 初始化为 ObservableArray 的建议大部分都有效

Items: kendo.data.ObservableArray = new kendo.data.ObservableArray([]);

但是 ObservableArray 的 parent 不会正确设置为 ViewModel，因此有时如果您尝试 MVVM 在绑定(bind)到 的 ListView 模板中绑定(bind) ViewModel 上的函数或属性Items，它将无法在 ViewModel 上找到属性或函数。

您可以通过在开发工具控制台中执行此操作来证明这一点:

x = new kendo.data.ObservableObject({
    items: []
});
x.items.parent(); // returns the object 'x' (correct)

y = new kendo.data.ObservableObject();
y.items = new kendo.data.ObservableArray([]);
y.items.parent(); // return undefined (but should be the object 'y')

在这种情况下，TypeScript 只会起到阻碍而不是帮助的作用......

---

正确的解决方案是在调用 super() 之前，在 构造函数中对类变量进行初始赋值。

class ViewModelSample extends ObservableObject {
    Items: kendo.data.ObservableArray;

    constructor() {
        this.Items = [];
        super();
    }
}

以正确的顺序生成 JS:

function ViewModelSample() {
    this.Items = [];  // Items assigned before call to ObservableObject constructor
    _super.call(this);
}

---

有趣的是，typescriptlang.org 上的 playground 似乎并不关心这一行:

this.Items = [];

将一个数组分配给一个应该属于ObservableArray类型的变量，但是如果真正的编译器抛出一个错误，那么你也可以这样做

this.Items = new kendo.data.ObservableArray([]);

这应该有效。只要生成的JS在调用ObservableObject构造函数之前给对象添加Items属性即可。