如何正确显示我的 Knockout 应用程序的模板元素？

Question

我已经开始使用 Knockout.js 并想编写一些简单的组件，但是我编写的代码没有显示模板的元素。我只看到 "h1" 标签内的文字。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Component</title>
        <script type="text/javascript" src="knockout-3.4.2.js"></script>
    </head>
    <body>
        <h1>Counter starting at 1:</h1>
        <counter params="initialCount: 1"></counter>

        <script type="text/javascript">
            function viewModel(params) {
                const self = this;
                self.count = ko.observable(params.initialCount);
                self.increment = () => self.count(self.count() + 1);
            }
            const template = 
            `<div>
                <span data-bind="text: count"></span>
                <button type="button" data-bind="click: increment">
                        Increment
                </button>
            </div>`;
            ko.components.register('counter', { viewModel, template });
        </script>       

    </body>
</html>

我做错了什么？

Answer 1

尝试在脚本末尾添加 ko.applyBindings();。

如何正确显示我的 Knockout 应用程序的模板元素？

How to display properly the template's elements of my Knockout app?

javascript

knockout.js