具有TypeScript的Kendo UI MVVM-将ViewModel设为“类"； [英] Kendo UI MVVM with TypeScript - Making ViewModels as "classes"

问题描述

我正在从一个项目过渡到Typescript，它使用Kendo UI的MVVM体系结构.但是，我在类的概念及其与视图模型的关系方面存在一些问题.

I am transitioning over a project to Typescript, and it uses Kendo UI's MVVM architecture. However I am having a bit of a problem with the concept of classes and its relationship to the view models.

我将建立一个类并扩展kendo.data.ObservableObject，这是您从中创建视图模型的内容，并用我的字段填充它，就像这样.

I will establish a class and extend kendo.data.ObservableObject, which is what you create a view model from, and populate it with my fields, like this.

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

基本上，该类表示我的视图模型，并进行了很好的封装.所以我像这样召唤它；

Basically this class represents my view model, nicely encapsulated. So I summon it up like this;

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

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

This works fairly well, but the behavior becomes kind of awkard. For instance, if I have a collection within the class and I push something to it, the user interface does not update.

如果我使用普通的javascript做到这一点，它就会起作用；

If I do this in normal javascript, it works;

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

但是，如果我在打字稿中执行此操作，则视图模型会更新，但DOM不会更新.我必须手动输入...

however if I do this in typescript, the view model updates, but the DOM does not. I have to manually type in ...

viewModel.Items.trigger('change');

为了更新用户界面.

有人可以帮助我理解为什么会这样吗?

Can anyone help me understand why this would happen?

推荐答案

您需要将items属性实例化为Kendo ObservableArray.当前，您仅在TypeScript中定义其类型(我很惊讶编译器没有对此抱怨?).

You need to instantiate the items property as a Kendo ObservableArray. Currently you're only defining its type in TypeScript (I'm surprised the compiler does not complain about this?).

将您的代码更新为:

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

有关更多信息，请参阅 Kendo文档.

For more information, consult the Kendo docs.

这篇关于具有TypeScript的Kendo UI MVVM-将ViewModel设为“类"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！