检测 Kendo UI 值绑定错误

Posted 2023-05-07

【中文标题】检测 Kendo UI 值绑定错误

【英文标题】：Detect Kendo UI Value-Binding Errors

【发布时间】：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

【参考方案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;
    ;