Question

当我使用knockout组件时，我遇到了绑定错误。 HTML：

<html >
<head>
<link rel="stylesheet" href="css/default.css">
</head>

<body>

    <main id="shell">

        <!-- logo & top level links -->
        <header>
            <header-widget></header-widget>
        </header>

    </main>

    <script type="text/javascript" src="thirdparty/requirejs/require-2.3.3.js" data-main='./js/requirejs.config'></script>
</body>

java脚本：

var requireConfig = {
    baseUrl: './',
    paths: {
        jquery: 'thirdparty/jquery/jquery-1.11.2',
        ko: 'thirdparty/knockout/knockout-3.4.2',
        text: 'thirdparty/requirejs/text'
    },
    shim: {

    }
};
require.config(requireConfig);
define(
    function(require) {
        require(['jquery', 'ko'], function($, ko) {
            var modle = {
            };
            $(document).ready(function() {
                ko.components.register('header-widget', {
                    viewmodel: function(params){
                        this.username = ko.observable('tom');
                    },
                    template: '<div data-bind="text:username">userxxx</div>'
                });
                ko.applyBindings(modle);

            });
        });
    }
);

我检查了名字，他们是对的。我无法弄清楚绑定失败的原因。我检查了stackoverflow.com，但找不到与此相同的问题。你能帮我吗？

Answer 1

我找到了原因。当我将params传递给ko.components.register时，视图模型参数名称不正确。 viewmodel: function(params){应为viewModel: function(params){。

Answer 2

当您使用自定义元素时，在调用applyBindings时无需提供模型。我想你需要做的就是：

摆脱这段代码：
```
var modle = {
};
```
将applyBindings来电缩短为：
```
ko.applyBindings();
```

这是因为组件的视图模型已在ko.components.register块中定义。

未捕获的ReferenceError：无法处理绑定“text：function（）{return username}”

2 个答案: