检测 Kendo UI 值绑定错误答案

【问题标题】：Detect Kendo UI Value-Binding Errors检测 Kendo UI 值绑定错误
【发布时间】：2013-12-13 08:05:25
【问题描述】：

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

当我无法检测到模型上确实不存在值绑定路径的情况时遇到问题，即在以下示例中：

source-binding 到不存在的属性 data-bind="source: AnotherNonExistingProp" 会引发错误 Uncaught TypeError: Cannot read property 'parent' of undefined（所以我可以在控制台中检测到它）
但是，value-binding 到不存在的属性 data-bind='value: Details.NonExistingProp' 确实 not 抛出任何错误 - 因此我无法确保我的观点没有回归。

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>

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

这是一个现场 jsFiddle example

【问题讨论】：

标签： javascript mvvm kendo-ui kendo-mvvm

【解决方案1】：

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

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

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

免责声明： 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

【讨论】：

谢谢！第二种方法很酷。我不太担心性能，因为我只会在集成测试环境中执行它。

【解决方案2】：

我对上述代码 (@Burke Holland) 使用了一些细微的变化来处理嵌套对象：

    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) {
                var splitFields = e.field.split('.');
                var nestObj = this;
                for (var i = 0; i < splitFields.length; i++) {
                    nestObj = nestObj[splitFields[i]];        
                }
                if (nestObj === undefined) {
                    console.error("Cannot bind to the field '" + e.field + "' because it does not exist");
                }
            });
        }

        return object;
    };

【讨论】：