检测Kendo UI值绑定错误

Detect Kendo UI Value-Binding Errors

本文关键字：绑定 错误 UI Kendo 检测      更新时间：2023-11-02

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

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

  • 源绑定到不存在的属性data-bind="source: AnotherNonExistingProp"会抛出错误Uncaught TypeError: Cannot read property 'parent' of undefined（因此我可以在控制台中检测到它）
  • 但是，值绑定到不存在的属性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>

当值绑定使用不存在的路径时（即，未定义路径所针对的属性时），是否有方法检测这种情况？

下面是一个实时的jsFiddle示例

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

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是一款经过微调的机器。如果你截取它的函数并像这样进行检查，你很可能会减慢它的速度。这也不会得到剑道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

我对上面的代码（@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;
    };
相关文章：