Question

为了快速回归测试，我正在寻找一种方法来确保所有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 example

Answer 1

您始终可以绑定到observable上的change事件并检查对象的属性...

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团队正式支持的事情。你的milage可能会有所不同。

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

Answer 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;
    };

检测Kendo UI值绑定错误

2 个答案: