javascript - 检测 Kendo UI 值绑定(bind)错误

Question

为了快速回归测试，我正在寻找一种方法来确保所有 KendoUI 的东西都已正确配置和初始化。

当我无法检测到模型上实际上不存在值绑定(bind)路径的情况时，我遇到了一个问题，即在以下示例中:

• source-binding 到不存在的属性 data-bind="source: AnotherNonExistingProp" 抛出错误 Uncaught TypeError: Cannot 读取未定义的属性“parent”(这样我就可以在控制台中检测到它)
• 但是，值绑定(bind)到不存在的属性 data-bind='value: Details.NonExistingProp' 不会抛出任何错误- 因此我无法确保我的观点不会出现倒退。

HTML:

    <form>
    <div>
        <label>Name<label>
        <input data-bind='value: Name' type='text' />
    </div>
    <div>
        <label>Age<label>
        <input data-bind='value: Details.NonExistingProp' type='text' />
    </div>
        <table border='1px' data-template="row-template" data-bind="source: anotherNonExistingProp">
        </table>
    </form>

JavaScript:

<script type='text/javascript'>
    $(function () {    
    var carModel = kendo.observable({
        Name: 'CarName',
        Details: {
            Age: 25
        },
        Parts: [{PartName:'aa'},
               {PartName:'bb'}]
    });
        kendo.bind($('form'), carModel);    
    })
</script>

有没有办法检测值绑定(bind)使用不存在的路径时的情况(即未定义路径所针对的属性时)？

这是一个实时的 jsFiddle example

Answer 1

您始终可以绑定(bind)到可观察对象的更改事件并检查对象的属性...

viewModel.bind("change", function(e) {
  if (this[e.field] === undefined) {
    console.error("The field " + e.field + " cannot be bound because it doesn't exist");
  }
});

如果您想一次获取所有可观察对象，您可以获取根可观察对象并快速绑定(bind)到更改。

免责声明:MVVM 是一台经过微调的机器。如果你拦截它的功能并像这样检查，你可能会减慢它的速度。这也不是 Kendo UI 团队正式支持的东西。您的里程可能会有所不同。

kendo.observable = function(object) {
  if (!(object instanceof kendo.data.ObservableObject)) {
    object = new kendo.data.ObservableObject(object);
    // add a get binding on all observables
    object.bind("get", function(e) {
      if (this[e.field] === undefined) {
        console.error("Cannot bind to the field '" + e.field + "' because it does not exist");
      }
    });
  }

  return object;
};

http://jsbin.com/amOSejUy/1/edit