KnockOut js脚本标记不应用数据绑定

Abh*_*950 1 html javascript knockout.js

我是淘汰js的新手,官方网站上维护的文档没有提供完整的html文件。因此,我最终编写了自己的脚本标签。当我创建html标记时,它没有按预期工作。但是,只需更改脚本标签的位置即可使其工作。

我的问题是,当将script标记放置在顶部时,然后在html body元素中调用该函数之前就可以使用该函数。它仍然不进行数据绑定,而将脚本放置在底部就可以解决它。仅通过重新排序脚本标签的位置怎么可能?有人可以提供必须使事物可用的顺序。我知道许多人都喜欢在最后使用脚本,以便DOM完全准备就绪并出于速度考虑。

我的代码如下:

  1. 不绑定数据。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<body>
<script type="text/javascript">
var myViewModel = {personName:'Bob', personAge:31};
ko.applyBindings(myViewModel);
</script>

The name is <span data-bind="text: personName"></span>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  1. 作品

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<body>
The name is <span data-bind="text: personName"></span>
<script type="text/javascript">
var myViewModel = {personName:'Bob', personAge:31};
ko.applyBindings(myViewModel);
</script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Jas*_*ake 5

ko.applyBindings被调用时,基因剔除会在文档中搜索任何数据绑定标签并应用适当的绑定。因此,文档和任何数据绑定标签必须在ko.applyBindings调用之前已经加载,否则敲除将找不到要绑定的内容。

您有几个可行的选择:

  1. 将applyBindings移到文档的底部,直到调用它时所有数据绑定都已就位。
  2. 将applyBindings包装在回调函数中,以便可以在任何位置定义它,但是将等待执行直到文档完成加载。为此,您可以使用jQuery $(document).ready(),或者如果您没有jQuery,请参阅此SO问题以寻求其他等效选项