时间戳

首页 > 解决方案 > 为什么 Knockoutjs 不能使用单独文件中的脚本？

knockout.js - 为什么 Knockoutjs 不能使用单独文件中的脚本？

问题描述

初学者。

在我的电脑上设置 KnockoutJS.com 的第一个教程。该代码在脚本位于 HTML 文档中时有效，但在单独的 .js 文件中引用时无效。如何修复，将 js 代码放在单独的文件中？

截屏

不起作用：

//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

解决方案

我意识到这是与这个问题相同的根本问题。

所以解决方案类似于Jason Spake 的解决方案：

解决方案 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());
})

推荐阅读