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>

我的文件＆＃34; jsfile.js＆＃34;看起来像这样......

alert('Binding Started');

function indexViewModel() {

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

ko.applyBindings(new indexViewModel());

提醒（＆＃39;绑定完成＆＃39;）;

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

如果我删除ko.applyBindings的行（..然后它会给我第二个警告，表明绑定已经完成。但显然按钮会注意到。

我做错了什么看起来好像没有看到.js文件中的淘汰赛功能但是我碰到了一堵砖墙..

请帮助..

Answer 1

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

您在“head”标签中应用敲除绑定。（在包括淘汰赛后的自定义.js文件中）

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

P.S。 - 将您的内容放在“头部”之后的“正文”中。然后在'body'之后包含你的自定义.js文件，这样一切现在都可以加载，以达到你想要的效果。或者......在DOM /窗口加载完成后，在.js本身中包含逻辑以执行。

Answer 2

（感谢Jody Geers指出我正确的方向）

好的我是一个HTML菜鸟..

没有身体＆lt;＆gt;

添加它们然后执行

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

现在工作正常..

Answer 3

请将你的js文件放在Body之后。如果你保持Knock out js文件的头部，那么在js文件中找不到具有Model.As UI的UI。

使用外部.js文件与knockout不应用绑定

3 个答案: