Kendo UI - 属性更改MVVM

Question

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

我正在尝试使用数据绑定来处理几个我称之为“计算”字段的问题。我有一个网格、几个按钮、过滤器和一页上所有使用相同数据源的排序，都使用observable数组' 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 数组中的内容并同时更新这三个对象的 previous、current 和 nextItems 副本。虽然不是很麻烦，但如果不必要，我只想不存储对象的副本。我希望在查看 API 时没有错过类似于 C#/Xaml 的 NotifyPropertyChanged("MyProperty") 功能。由于某些计算字段的复杂性以及需要减少设备内存消耗，这种功能对我未来的任务非常有用。

谢谢任何帮助， ~David

- David Crook

---

如果您需要绑定到Kendo ViewModel的更改事件，可以使用类似以下代码：viewmodel.bind("change", function (e) { if (e.field == "currentItem") viewmodel.doSomething(); }); - John Washam

Answer 1

每当视图模型的属性发生变化时，就会触发 change 事件。

为了使计算字段正常工作，您需要使用 ObservableObject.get() 访问相关字段。请参阅文档中的此部分内容。

- Lars Höppner

---

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

你能否创建一个jsfiddle来演示问题？或者至少展示一下你是如何绑定视图模型的？ - Lars Höppner

你能展示一个使用kendo和jquery的jsfiddle示例吗？我不确定如何在那里引入外部资源。 - David Crook

Answer 2

存在两个可能的问题。

1）如何将项目添加到allitems中？

2）您还应该获取.get（“currentIndex”），因为这是您在changeCurrentItem中更新的值。

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

当allItems或者currentIndex改变时，应该会导致viewModel触发其currentItem计算字段的更改事件。

如果所有其他方法都失败了，您可以通过执行以下操作手动触发更改事件：

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

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

- CodingWithSpike

---

让我试着回答一些关于我的实现提出的问题...

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绑定各个字段的方式如下：<div class="warehouse" data-bind="text: previousItem.location"></div>

- David Crook

谢谢CodingWithSpike...我正在使用TypeScript，但.get和.set方法对我的依赖函数无效。viewmodel.trigger方法非常好用！在WPF中使用MVVM时，我也使用相同的方法。 - samneric