Kendo UI - 属性更改 MVVM

Posted 2023-05-07

【中文标题】Kendo UI - 属性更改 MVVM

【英文标题】：Kendo UI - Property Changed MVVM

【发布时间】：2013-12-02 02:29:40

【问题描述】：

我似乎在使用 Kendo UI 绑定“计算”字段时遇到问题。

我正在尝试对几个我称之为“计算”字段的数据绑定。我在一个页面上有一个网格、几个按钮、过滤器和一些排序，它们都使用相同的数据源，一个名为“allItems”的可观察数组。 allItems 通过服务调用填充，并在用户通过按钮在页面上时进行排序、操作和更改。

根据当前应用的过滤器和排序，根据上一项、当前项和下一项中的信息填充了几个导航按钮和几个 div。这些按钮包含从上一个、当前和下一个项目中提取的信息，因为它们与 allItems 列表相关（即对象实际上保存在 allItems 数组中，实际上是可观察的对象）。

所以在 viewmodel 对象中我有这样的东西（请原谅短手）：

var viewmodel = kendo.observable(
var allItems = observablearray[]

var currentIndex = 1; //or other default value

var changeCurrentItem = function()
    var self = this;
    //do some stuff
    //stuff might include modification to allItems
    self.set("currentIndex", someNewValue);


var previousItem = function()
    return self.get('allItems')[currentIndex - 1];


var currentItem = function()
    return self.get('allItems')[currentIndex];


var nextItem = function()
    return self.get('allItems')[currentIndex + 1];
);

return viewmodel;

按钮和其他信息框绑定到上一个、当前和下一个项目。但这似乎不起作用。我必须制作 allItems 数组中的内容的先前、当前和 nextItems 副本，并同时更新这 3 个对象。没什么大不了的，但我只是想，你知道，如果我不需要的话，不要存储对象的副本。我希望在通过 API 时可能会错过类似于 C#/Xaml 的 NotifyPropertyChanged("MyProperty")。由于我们计算字段的一些复杂性以及随着设备变得更小而需要减少内存消耗，这种功能对于我在列表中的未来任务将是最有用的。

感谢您的帮助， 〜大卫

【问题讨论】：

如果你需要绑定到 Kendo ViewModel 的 change 事件，你可以使用这样的东西：viewmodel.bind("change", function (e) if (e.field == "currentItem") viewmodel.doSomething(); );

【参考方案1】：

每当视图模型的属性发生变化时，change event 就会被触发。 要在计算字段中进行此操作，您需要使用 ObservableObject.get() 访问相关字段。请参阅文档中的this section。

【讨论】：

我应该澄清一下，我已经通过 self.get("allItems")[currentIndex] 访问了 allItems。我已修改问题以反映这一点。

你能创建一个jsfiddle来演示这个问题吗？或者至少告诉我们你是如何绑定视图模型的？

你能展示一个使用 kendo 和 jquery 的 jsfiddle 示例吗？我不知道如何在那里拉入外部资源。

【参考方案2】：

2 个可能的问题。

1) 如何将物品放入allitems？

2) 您还应该.get("currentIndex")，因为这是您在changeCurrentItem 中更新的值

var currentItem = function()
    return self.get('allItems')[self.get('currentIndex')];

这应该会导致viewModel 在allItems 或currentIndex 更改时触发currentItem 计算字段的更改事件。

如果一切都失败了，您可以手动触发更改事件：

viewmodel.trigger("change",  field: "currentItem" );
viewmodel.trigger("change",  field: "previousItem" );
viewmodel.trigger("change",  field: "nextItem" );

这类似于在 XAML 中调用 NotifyPropertyChanged("currentItem")。

【讨论】：

让我试着回答一些关于我的实现的问题... 1. 我现在更改了要使用的代码： var currentItem = function() return self.get('allItems' )[self.get('currentIndex')]; 2. 我决定尝试 viewmodel.trigger ，无论何时发生项目移动。 viewmodel.trigger("change", field: "nextItem" ); 3. allItems 是通过使用 self.get("allItems").push(newItem) 的服务调用填充的——这适用于绑定到数组的任何内容 4. 对于各种字段，html 的绑定方式如下：

谢谢 CodingWithSpike... 我正在使用 TypeScript，而 .get 和 .set 方法不适用于我的依赖函数。 viewmodel.trigger 方法就像一个魅力！在 WPF 中使用 MVVM 时，我也使用相同的方法。