使用带有敲除的外部 .js 文件不应用绑定

Question

我正在尝试掌握 Knockout，因此我创建了以下 html 文件...

<html>
<head>
<script type='text/javascript'     src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>

<button data-bind="click: speak">Say it</button>

<script>
alert('Binding Started');

function indexViewModel() {

    this.speak = function() {
        alert('Working!!');
    };  
}

ko.applyBindings(new indexViewModel());

alert('Binding Done');


</script>

</html>

当我加载页面时，一切都很好。我收到一条警告说绑定正在开始....然后我收到另一个警告说它已完成，当我单击按钮时...是的，你猜对了我收到一条警告说它正在工作。

我遇到的问题是，当我尝试将 java-脚本代码分离到外部文件中时，它不应用绑定。

所以我的 html 文件将如下所示......

<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script> 
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>

<button data-bind="click: speak">Say it</button>

</html>

我的文件 "jsfile.js" 看起来像这样....

alert('Binding Started');

function indexViewModel() {

    this.speak = function() {
        alert('Working asstastic');
    };  
}

ko.applyBindings(new indexViewModel());

警报('Binding Done');

当我现在加载 html 页面时，我收到绑定开始的警报，然后......没有...... :(

如果我删除 ko.applyBindings(.. 的行，那么它会向我发出绑定已完成的第二个警报。但是显然按钮没有注意到。

我做错了什么在.js文件中好像没有看到knockout函数但是我碰壁了..

请帮忙..

Answer 1

'head' html 标签将在 'body' 标签之前加载...

您在 'head' 标签中应用了敲除绑定。（在您的自定义 .js 文件中包含剔除后）

这些绑定/Javascript 代码在主体加载之前加载/执行/发生；因此它的 / knockout 试图将 js 数据绑定到浏览器 / window 尚不知道的 html body UI 内容。

p.s。 - 将您的内容放在 'head' 之后的 'body' 中。然后在 'body,' 之后包含您的自定义 .js 文件，这样现在所有内容都已加载，以实现您想要的效果。或者...在 .js 本身中包含逻辑以在 DOM / window 完成加载后执行。

Answer 2

（感谢 Jody Geers 为我指明了正确的方向）

好吧，我是一个 HTML 菜鸟..

没有尸体<>

添加它们，然后

<script type='text/javascript' src='jsfile.js'></script>

现在工作正常..

Answer 3

请将您的 js 文件放在 Body 之后。如果您将 Knock out js 文件放在 head 中，那么 UI 和 Model.As UI 不会在 UI 中找不到js文件。

使用带有敲除的外部 .js 文件不应用绑定

Using a external .js file with knockout not applying bindings

html

javascript

knockout.js