为什么 Knockoutjs 不能使用单独文件中的脚本？答案

【问题标题】：Why is Knockoutjs not working with script in separate file?为什么 Knockoutjs 不能使用单独文件中的脚本？
【发布时间】：2021-02-24 18:41:33
【问题描述】：

初学者。

在我的电脑上设置 KnockoutJS.com 的第一个教程。该代码在脚本位于 HTML 文档中时有效，但在单独的 .js 文件中引用时无效。怎么解决，把js代码放在一个单独的文件里？

Screenshot

不起作用：

//My JS file - C:/Users/XXXXXX/Desktop/ko/EX_HelloWorld_ViewModel.js:
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}
ko.applyBindings(new AppViewModel());

<!-- My HTML file:  -->
<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/knockout-3.5.1.js'></script>
<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/EX_HelloWorld_ViewModel.js'></script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

作品：

<!-- HTML file ONLY: -->
<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/knockout-3.5.1.js'></script>
<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/EX_HelloWorld_ViewModel.js'></script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<script>
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    }
    ko.applyBindings(new AppViewModel());
</script>

【问题讨论】：

标签： knockout.js

【解决方案1】：

我意识到这与question 是同一个根本问题。

所以解决方法类似于Jason Spake's solution:

解决方案 1：将第二个脚本行向下移动 - 在数据绑定之后。

<!-- My HTML file:  -->
<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/knockout-3.5.1.js'></script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<script type='text/javascript' src='C:/Users/XXXXXX/Desktop/ko/EX_HelloWorld_ViewModel.js'></script>

解决方案 2：将 applyBindings() 绑定到文档完成加载时的事件。

//My JS file - C:/Users/XXXXXX/Desktop/ko/EX_HelloWorld_ViewModel.js:
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}
document.addEventListener("DOMContentLoaded", function(event) {
    ko.applyBindings(new AppViewModel());
})

【讨论】：