Question

我有一个我在Internet Explorer和Chrome中测试的错误，这只发生在Internet Explorer中。

我正在使用Knockout-3.3.0和Knockout Validation。

我有一个淘汰组件，它使用类似于下面的自定义元素：

<div>

    ...

    <div data-bind="with: editableUser">
        <div data-bind="visible: !$parent.editMode">
            <user-picker params="value: $parent.user, multiple:false, hideSelection:true"></user-picker>
        </div>
    </div>

    ...

</div>

自定义元素是其他节点的后代，这些节点是我的视图模型的一部分，如上所示。

正在应用页面的脚本依赖项和视图模型绑定，如下所示：

<script src="/Scripts/knockout-3.3.0.debug.js"></script>
<script src="/Scripts/knockout.validation.js"></script>
<script src="/Scripts/CustomBindings.js"></script>

<script>
    $(function() {
        ko.validation.init({
            insertMessages: false,
            decorateInputElement: false,
            errorElementClass: "has-error has-feedback",
            decorateElementOnModified: true
        });
    });
</script>

<script src="/Scripts/UserPicker.js"></script>
<script src="/Scripts/UserModel.js"></script>
<script src="/Scripts/CustomComponents.js"></script>
<script type="text/javascript">
    var userModel;
    $(function() {
        var userRepository = new MyModule.UserRepository();
        userModel = new MyModule.UserModel(userRepository);
        ko.applyBindings(userModel);
    }); 
</script>

组件的模板在脚本之前的MVC部分中呈现;如下图所示：

<template id="user-picker-template">
    <div class="user-picker"> ... </div>
</template>

该组件已在CustomComponents.js注册，如图所示。

ko.components.register('user-picker', {
    template: { element: 'user-picker-template' },
    viewModel: MyModule.UserPicker
});

我在CustomBindings.js文件中也有自定义的敲除绑定。

调试Knockout时，此行中的函数applyBindingsToNodeInternal发生错误：

var initResult = handlerInitFn(node, getValueAccessor(bindingKey), allBindings, bindingContext['$data'], bindingContext);

ko.applyBindings来电时会抛出javascript错误。

错误是user-picker-template内的第一个绑定中的属性未定义，这是因为正在使用的bindingContext不正确，正在传递userModel而不是{ {1}}。

由于错误，剩余的非组件相关绑定已完成，然后UserPicker绑定在之后正确完成，但由于javascript错误，我的点击事件上的一些回调代码不起作用。

在Chrome中对此进行调试时，将忽略用户选择器的绑定，直到绑定user-picker为止。

有谁知道可能导致此错误的原因？

Answer 1

这是因为模板被绑定在组件之外，直接位于<template>元素内。 Knockout没有专门跳过<template>元素，但browsers that support <template>报告的内容与普通元素不同。

最简单的方法是不使用<template>而是使用<script>：

<script type="text/html" id="user-picker-template">
    <div class="user-picker"> ... </div>
</script>

在Internet Explorer 11中给出错误的绑定上下文的Knockout组件

1 个答案: